投稿日: 投稿者: 1x2x3

table

CSSについて説明します。

display: tableについて説明します。

display: table

tableは、table wrapper boxをestablishします。
table wrapper boxは、table grid boxesの周りに生成されたblock boxです。

構造

W3Cの下記に構造を示す図があります。

17 Tables
CSS Table Module Level 3

それぞれに分解します。

display: table

tableタグと対応します。

test_007.css

  1. div.test-007-table
  2. {
  3.     display: table;
  4.     box-sizing: border-box;
  5.     border-spacing: 2px;
  7.     width: 100%;
  8.     height: 400px;
  10.     border: 1px solid #3399FFCC;
  11. }

test_007.html

  1. <!DOCTYPE html>
  2. <head><link rel="stylesheet" type="text/css" href="./test_007.css"/></head>
  3. <body>
  5. <div class="test-007-table"><div>
  7. </body>

表示は下記となります。

上記は下記と同様です。

  1. table.test-007-001
  2. {
  3.     width: 100%;
  4.     height: 400px;
  5.     border: 1px solid #3399FFCC;
  6. }

test_007.html

  1. <!DOCTYPE html>
  2. <head><link rel="stylesheet" type="text/css" href="./test_007.css"/></head>
  3. <body>
  5. <table class="test-007-001"></table>
  7. </body>

display: table-column-group

colgroupタグと対応します。

test_007.css

  1. div.test-007-table
  2. {
  3.     display: table;
  4.     box-sizing: border-box;
  5.     border-spacing: 2px;
  7.     width: 100%;
  8.     height: 400px;
  10.     border: 1px solid #3399FFCC;
  11. }
  13. div.test-007-colgroup-blue
  14. {
  15.     display: table-column-group;
  16.     background-origin: padding-box;
  18.     background: #3399FFCC;
  19. }
  21. div.test-007-col
  22. {
  23.     display: table-column;
  24. }
  26. div.test-007-tr
  27. {
  28.     display: table-row;
  29. }
  31. div.test-007-td
  32. {
  33.     display: table-cell;
  35.     margin: 2px;
  36.     padding: 2px;
  37. }

test_007.html

  1. <!DOCTYPE html>
  2. <head><link rel="stylesheet" type="text/css" href="./test_007.css"/></head>
  3. <body>
  5. <div class="test-007-table">
  6.     <div class="test-007-colgroup-blue">
  7.     <div class="test-007-col"></div><div class="test-007-col"></div><div class="test-007-col"></div><div class="test-007-col"></div><div class="test-007-col"></div><div class="test-007-col"></div><div class="test-007-col"></div><div class="test-007-col"></div><div class="test-007-col"></div>
  8.     </div>
  9.     <div class="test-007-tr">
  10.     <div class="test-007-td"></div><div class="test-007-td"></div><div class="test-007-td"></div><div class="test-007-td"></div><div class="test-007-td"></div><div class="test-007-td"></div><div class="test-007-td"></div><div class="test-007-td"></div><div class="test-007-td"></div>
  11.     </div>
  12. </div>
  14. </body>

表示は下記となります。

上記は下記と同様です。

test_007.css

  1. table.test-007-001
  2. {
  3.     width: 100%;
  4.     height: 400px;
  5.     border: 1px solid #3399FFCC;
  6. }
  8. colgroup.test-007-002
  9. {
  10.     background: #3399FFCC;
  11. }

test_007.html

  1. <!DOCTYPE html>
  2. <head><link rel="stylesheet" type="text/css" href="./test_007.css"/></head>
  3. <body>
  5. <table class="test-007-001">
  6.     <colgroup class="test-007-002">
  7.     <col></col><col></col><col></col>
  8.     </colgroup>
  9.     <tr>
  10.     <td></td><td></td><td></td>
  11.     </tr>
  12. </table>
  14. </body>

display: table-column

colタグと対応します。

test_007.css

  1. div.test-007-table
  2. {
  3.     display: table;
  4.     box-sizing: border-box;
  5.     border-spacing: 2px;
  7.     width: 100%;
  8.     height: 400px;
  10.     border: 1px solid #3399FFCC;
  11. }
  13. div.test-007-colgroup
  14. {
  15.     display: table-column-group;
  16.     background-origin: padding-box;
  17. }
  19. div.test-007-col-blue:nth-child(odd)
  20. {
  21.     display: table-column;
  22.     background: #66CCFFCC;
  23. }
  25. div.test-007-col-blue:nth-child(even)
  26. {
  27.     display: table-column;
  28.     background: #3399FFCC;
  29. }
  31. div.test-007-tr
  32. {
  33.     display: table-row;
  34. }
  36. div.test-007-td
  37. {
  38.     display: table-cell;
  40.     margin: 2px;
  41.     padding: 2px;
  42. }

test_007.html

  1. <!DOCTYPE html>
  2. <head><link rel="stylesheet" type="text/css" href="./test_007.css"/></head>
  3. <body>
  5. <div class="test-007-table">
  6.     <div class="test-007-colgroup">
  7.     <div class="test-007-col-blue"></div><div class="test-007-col-blue"></div><div class="test-007-col-blue"></div><div class="test-007-col-blue"></div><div class="test-007-col-blue"></div><div class="test-007-col-blue"></div><div class="test-007-col-blue"></div><div class="test-007-col-blue"></div><div class="test-007-col-blue"></div>
  8.     </div>
  9.     <div class="test-007-tr">
  10.     <div class="test-007-td"></div><div class="test-007-td"></div><div class="test-007-td"></div><div class="test-007-td"></div><div class="test-007-td"></div><div class="test-007-td"></div><div class="test-007-td"></div><div class="test-007-td"></div><div class="test-007-td"></div>
  11.     </div>
  12. </div>
  14. </body>

表示は下記となります。

上記は下記と見た目は同様です。

test_007.css

  1. table.test-007-001
  2. {
  3.     width: 100%;
  4.     height: 400px;
  5.     border: 1px solid #3399FFCC;
  6. }
  8. colgroup.test-007-002
  9. {
  10.     background: #3399FFCC;
  11. }
  13. col.test-007-003
  14. {
  15.     background: #66CCFFCC;
  16. }

test_007.html

  1. <!DOCTYPE html>
  2. <head><link rel="stylesheet" type="text/css" href="./test_007.css"/></head>
  3. <body>
  5. <table class="test-007-001">
  6.     <colgroup class="test-007-002">
  7.     <col class="test-007-003"></col><col></col><col class="test-007-003"></col>
  8.     <colgroup>
  9.     <tr>
  10.     <td></td><td></td><td></td>
  11.     </tr>
  12. </table>
  14. </body>

display: table-row-group

tbodyタグと対応します。

test_007.css

  1. div.test-007-table
  2. {
  3.     display: table;
  4.     box-sizing: border-box;
  5.     border-spacing: 2px;
  7.     width: 100%;
  8.     height: 400px;
  10.     border: 1px solid #3399FFCC;
  11. }
  13. div.test-007-tbody-blue
  14. {
  15.     display: table-row-group;
  16.     background: #3399FFCC;
  17. }
  19. div.test-007-tr
  20. {
  21.     display: table-row;
  22. }
  24. div.test-007-td
  25. {
  26.     display: table-cell;
  28.     margin: 2px;
  29.     padding: 2px;
  30. }

test_007.html

  1. <!DOCTYPE html>
  2. <head><link rel="stylesheet" type="text/css" href="./test_007.css"/></head>
  3. <body>
  5. <div class="test-007-table">
  6.     <div class="test-007-tbody-blue">
  7.         <div class="test-007-tr"><div class="test-007-td"></div></div>
  8.         <div class="test-007-tr"><div class="test-007-td"></div></div>
  9.         <div class="test-007-tr"><div class="test-007-td"></div></div>
  10.     </div>
  11. </div>
  13. </body>

表示は下記となります。

上記は下記と同様です。

test_007.css

  1. table.test-007-001
  2. {
  3.     width: 100%;
  4.     height: 400px;
  5.     border: 1px solid #3399FFCC;
  6. }
  8. tbody.test-007-004
  9. {
  10.     background: #3399FFCC;
  11. }

test_007.html

  1. <!DOCTYPE html>
  2. <head><link rel="stylesheet" type="text/css" href="./test_007.css"/></head>
  3. <body>
  5. <table class="test-007-001">
  6.     <tbody class="test-007-004">
  7.         <tr><td></td></tr>
  8.         <tr><td></td></tr>
  9.         <tr><td></td></tr>
  10.     </tbody>
  11. </table>
  13. </body>

display: table-row

trタグと対応します。

test_007.css

  1. div.test-007-table
  2. {
  3.     display: table;
  4.     box-sizing: border-box;
  5.     border-spacing: 2px;
  7.     width: 100%;
  8.     height: 400px;
  10.     border: 1px solid #3399FFCC;
  11. }
  13. div.test-007-tbody
  14. {
  15.     display: table-row-group;
  16. }
  18. div.test-007-tr-blue:nth-child(odd)
  19. {
  20.     display: table-row;
  21.     background: #66CCFFCC;
  22. }
  24. div.test-007-tr-blue:nth-child(even)
  25. {
  26.     display: table-row;
  27.     background: #3399FFCC;
  28. }
  30. div.test-007-td
  31. {
  32.     display: table-cell;
  34.     margin: 2px;
  35.     padding: 2px;
  36. }

test_007.html

  1. <!DOCTYPE html>
  2. <head><link rel="stylesheet" type="text/css" href="./test_007.css"/></head>
  3. <body>
  5. <div class="test-007-table">
  6.     <div class="test-007-tbody">
  7.         <div class="test-007-tr-blue"><div class="test-007-td"></div></div>
  8.         <div class="test-007-tr-blue"><div class="test-007-td"></div></div>
  9.         <div class="test-007-tr-blue"><div class="test-007-td"></div></div>
  10.     </div>
  11. </div>
  13. </body>

表示は下記となります。

上記は下記と同様です。

test_007.css

  1. table.test-007-001
  2. {
  3.     width: 100%;
  4.     height: 400px;
  5.     border: 1px solid #3399FFCC;
  6. }
  8. tr.test-007-005:nth-child(odd)
  9. {
  10.     background: #66CCFFCC;
  11. }
  13. tr.test-007-005:nth-child(even)
  14. {
  15.     background: #3399FFCC;
  16. }

test_007.html

  1. <!DOCTYPE html>
  2. <head><link rel="stylesheet" type="text/css" href="./test_007.css"/></head>
  3. <body>
  5. <table class="test-007-001">
  6.     <tbody>
  7.     <tr class="test-007-005"><td></td></tr>
  8.     <tr class="test-007-005"><td></td></tr>
  9.     <tr class="test-007-005"><td></td></tr>
  10.     </tbody>
  11. </table>
  13. </body>

display: table-cell

tdタグ、thタグと対応します。

test_007.css

  1. div.test-007-table
  2. {
  3.     display: table;
  4.     box-sizing: border-box;
  5.     border-spacing: 2px;
  7.     width: 100%;
  8.     height: 400px;
  10.     border: 1px solid #3399FFCC;
  11. }
  13. div.test-007-tbody-blue-pattern
  14. {
  15.     display: table-row-group;
  16. }
  17. div.test-007-tbody-blue-pattern .test-007-tr:nth-child(odd) .test-007-td:nth-child(odd)
  18. {
  19.     background: #66CCFFCC;
  20. }
  22. div.test-007-tbody-blue-pattern .test-007-tr:nth-child(odd) .test-007-td:nth-child(even)
  23. {
  24.     display: table-cell;
  25.     background: #3399FFCC;
  26. }
  28. div.test-007-tbody-blue-pattern .test-007-tr:nth-child(even) .test-007-td:nth-child(odd)
  29. {
  30.     display: table-cell;
  31.     background: #3399FFCC;
  32. }
  34. div.test-007-tbody-blue-pattern .test-007-tr:nth-child(even) .test-007-td:nth-child(even)
  35. {
  36.     display: table-cell;
  37.     background: #66CCFFCC;
  38. }
  40. /* 
  41. div.test-007-tbody-blue-pattern .test-007-tr:nth-child(1n) .test-007-td:nth-child(3n)
  42. {
  43.     background: #66CCFFCC;
  44. } 
  45. */
  47. div.test-007-tr
  48. {
  49.     display: table-row;
  50. }
  52. div.test-007-td
  53. {
  54.     display: table-cell;
  56.     margin: 2px;
  57.     padding: 2px;
  58. }

test_007.html

  1. <!DOCTYPE html>
  2. <head><link rel="stylesheet" type="text/css" href="./test_007.css"/></head>
  3. <body>
  5. <div class="test-007-table">
  6.     <div class="test-007-tbody-blue-pattern">
  7.         <div class="test-007-tr">
  8.             <div class="test-007-td"></div>
  9.             <div class="test-007-td"></div>
  10.             <div class="test-007-td"></div>
  11.             <div class="test-007-td"></div>
  12.             <div class="test-007-td"></div>
  13.             <div class="test-007-td"></div>
  14.             <div class="test-007-td"></div>
  15.             <div class="test-007-td"></div>
  16.             <div class="test-007-td"></div>
  17.         </div>
  18.         <div class="test-007-tr">
  19.             <div class="test-007-td"></div>
  20.             <div class="test-007-td"></div>
  21.             <div class="test-007-td"></div>
  22.             <div class="test-007-td"></div>
  23.             <div class="test-007-td"></div>
  24.             <div class="test-007-td"></div>
  25.             <div class="test-007-td"></div>
  26.             <div class="test-007-td"></div>
  27.             <div class="test-007-td"></div>
  28.         </div>
  29.         <div class="test-007-tr">
  30.             <div class="test-007-td"></div>
  31.             <div class="test-007-td"></div>
  32.             <div class="test-007-td"></div>
  33.             <div class="test-007-td"></div>
  34.             <div class="test-007-td"></div>
  35.             <div class="test-007-td"></div>
  36.             <div class="test-007-td"></div>
  37.             <div class="test-007-td"></div>
  38.             <div class="test-007-td"></div>
  39.         </div>
  40.     </div>
  41. </div>
  43. </body>

表示は下記となります。

上記は下記と同様です。

test_007.css

  1. table.test-007-001
  2. {
  3.     width: 100%;
  4.     height: 400px;
  5.     border: 1px solid #3399FFCC;
  6. }
  8. tbody.test-007-007 tr:nth-child(odd) td:nth-child(odd)
  9. {
  10.     background: #66CCFFCC;
  11. }
  13. tbody.test-007-007 tr:nth-child(odd) td:nth-child(even)
  14. {
  15.     background: #3399FFCC;
  16. }
  18. tbody.test-007-007 tr:nth-child(even) td:nth-child(odd)
  19. {
  20.     background: #3399FFCC;
  21. }
  23. tbody.test-007-007 tr:nth-child(even) td:nth-child(even)
  24. {
  25.     background: #66CCFFCC;
  26. }

test_007.html

  1. <!DOCTYPE html>
  2. <head><link rel="stylesheet" type="text/css" href="./test_007.css"/></head>
  3. <body>
  5. <table class="test-007-001">
  6.     <tbody class="test-007-007">
  7.     <tr>
  8.         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
  9.     </tr>
  10.     <tr>
  11.         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
  12.     </tr>
  13.     <tr>
  14.         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
  15.     </tr>
  16.     </tbody>
  17. </table>
  19. </body>

まとめ

お疲れ様です。

headerとfooterとcaptionについての説明は省略しています。

参考

17 Tables
CSS Table Module Level 3
<display-internal>

参考 & 広告

Kindle版です。
紙の本と、PDF版があります。
Kindle版です。
電子書籍です。



«       »
カテゴリーCSS