CSS 加油包之 CSS Table

STApril
356 阅读4分钟

CSS Table

CSS Table 是 CSS 的一个模块，定义了如何布局表格数据。

CSS Table 的属性包括：

  1. border-collapse
  2. border-spacing
  3. caption-side
  4. empty-cells
  5. table-layout
  6. vertical-align

1. border-collapse | 边框折叠

边框折叠的两种情况：border-collapse: collapse；和 border-collapse: separate

当值为 collapse 时，边框折叠，相邻的单元共用边框；

当值为 separate 时，边框不折叠，各单元有分开的边框。

🌰 举例

<!--html--> 
<table class="separate">
  <caption><code>border-collpase: separate</code></caption>
   <caption><code>边框拆分</code></caption>
  <tbody>
    <tr><th>姓名</th> <th>爱好</th></tr>
    <tr><td class="fx">小五郎</td> <td class="gk">沉睡</td></tr>
    <tr><td class="ed">小兰</td> <td class="tr">空手道</td></tr>
    <tr><td class="sa">柯南</td> <td class="wk">射击</td></tr>
    <tr><td class="ch">新一</td> <td class="bk">足球</td></tr>
    <tr><td class="op">博士</td> <td class="bk">发明</td></tr>
  </tbody>
</table>
<table class="collapse">
  <caption><code>border-collapse: collapse</code></caption>
    <caption><code>边框折叠</code></caption>
  <tbody>
    <tr><td class="fx">小五郎</td> <td class="gk">沉睡</td></tr>
    <tr><td class="ed">小兰</td> <td class="tr">空手道</td></tr>
    <tr><td class="sa">柯南</td> <td class="wk">射击</td></tr>
    <tr><td class="ch">新一</td> <td class="bk">足球</td></tr>
    <tr><td class="op">博士</td> <td class="bk">发明</td></tr>
  </tbody>
</table>

/* CSS */
.collapse {
  border-collapse: collapse;
}

.separate {
  border-collapse: separate;
}

table {
  display: inline-table;
  margin: 1em;
  border: dashed 6px grey;
}

table th,
table td {
  border: solid 3px;
}

.fx { border-color: orange blue; }
.gk { border-color: black red; }
.ed { border-color: blue gold; }
.tr { border-color: aqua; }
.sa { border-color: silver blue; }
.wk { border-color: gold blue; }
.ch { border-color: red yellow green blue; }
.bk { border-color: navy blue teal aqua; }
.op { border-color: red; }

 ⬅️  效果图

2. border-spacing | 边距

border-spacing CSS属性设置了相邻<table>单元格的边界之间的距离。该属性仅适用于 border-collapse 为 seperate 的情况。

border-spacing 同时还用于 table 之外的地方，例如单元格和table之间的首行/首列的距离，和 padding 的相对距离等。

border-spacing: 2px; 表示水平和垂直的距离都是2px；

border-spacing: 2px 1px; 表示水平距离2px；垂直距离1px

🌰 举例

  <!--html--> 
  <table>
  <tr>
    <td>1</td><td>2</td><td>3</td>
  </tr>
  <tr>
    <td>4</td><td>5</td><td>6</td>
  </tr>
  <tr>
    <td>7</td><td>8</td><td>9</td>
  </tr>
</table>

/* CSS */
table {
  border-spacing: 30px 10px;
  padding: 10px;
  border: 3px solid pink;
}

td {
  width: 2em;
  height: 2em;
  background: lightblue;
  text-align: center;
  vertical-align: middle;
}

 ⬅️  效果图

3. caption-side | 标题位置

caption-side 属性会将表格的标题<caption> 放到规定的位置。但是具体显示的位置与表格的 writing-mode 属性值有关。

🌰 举例

  <!--html-->   
<table class="top">
  <caption>caption-side: top</caption>
  <caption>蓝蓝的天空</caption>
  <tr>
    <td>ST今年</td>
    <td>18岁</td>
  </tr>
</table>

<br>

<table class="bottom">
    <caption>caption-side: bottom</caption>
  <caption>绿绿的地</caption>
  <tr>
    <td>ST今年</td>
    <td>18岁</td>
  </tr>

/* CSS */
.top caption {
  caption-side: top;
  color: blue;
}

.bottom caption {
  caption-side: bottom;
  color: green;
}

table {
  background: pink;
}

td {
  border: 1px solid white;
  color: white;
}

 ⬅️  效果图

4. empty-cells | 空房

empty-cells 属性设置了在没有可见内容的<table>单元格周围是否出现边框和背景。

empty-cells: show; 出现边框和背景；

empty-cells: hide; 隐藏边框和背景

🌰 举例

  <!--html--> 

<table class="table_1">
  <tr>
    <td>阿云</td>
    <td>阿腾</td>
  </tr>
  <tr>
    <td>阿天</td>
    <td></td>
  </tr>
</table>
<br>
<table class="table_2">
  <tr>
    <td>阿云</td>
    <td>阿腾</td>
  </tr>
  <tr>
    <td>阿天</td>
    <td></td>
  </tr>
</table>

/* CSS */

.table_1 {
  empty-cells: show;
}

.table_2 {
  empty-cells: hide;
}

td,
th {
  border: 3px solid royalblue;
  background: lightblue;
  color: saddlebrown;
  padding: 0.5rem;
}

 ⬅️  效果图

5. table-layout | 版式

table-layout属性设置了用于布局<table>单元格、行和列的算法。

table-layout: auto; 自动表格布局，表格及单元格宽度取决于其包含的内容；

table-layout: fixed; 固定表格布局，不会自适应。任何一个包含溢出内容的单元格可以使用 overflow 属性控制是否允许内容溢出。

🌰 举例

  <!--html--> 
<table class="table_1">
  <tr>
    <td>阿云在宝记卖小商品</td>
    <td>阿腾在鹅记卖皮肤</td>
    <td>阿天在家里边写作业</td>
  </tr>
</table>
<br>
<table class="table_2">
  <tr>
    <td>阿云在宝记卖小商品</td>
    <td>阿腾在鹅记卖皮肤</td>
    <td>阿天在家里边写作业</td>
  </tr>
</table>

/* CSS */
.table_1 {
 table-layout: fixed;
 width: 120px;
 border: 3px solid pink; 
}

.table_2 {
 table-layout: auto;
 width: 120px;
 border: 3px solid orange; 
}

td {
 border: 2px solid purple;
 background: beige;
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis; 
}

 ⬅️  效果图

6.vertical-align | 竖直排列

vertical-align CSS属性设置内联(inline)、内联块(inline-block)或表格单元格(table-cell)的垂直对齐方式。

vertical-align: top; 使元素及其后代元素的顶部与整行的顶部对齐；

vertical-align: text-top; 使元素的顶部与父元素的字体顶部对齐；

vertical-align: bottom; 使元素及其后代元素的底部与整行的底部对齐；

vertical-align: text-bottom; 使元素的底部与父元素的字体底部对齐；

vertical-align: middle; 使单元格内边距盒模型在该行内居中对齐；

同时还有 baseline | sub | super | |  等

🌰 举例 

  <!--html--> 
<table>
  <hr/ >
<div>这是一个 <img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> 默认对齐；</div>
  <hr />
<div>这是一个 <img class="top" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" />  text-top 对齐； </div>
    <hr />
<div>这是一个 <img class="bottom" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" />  text-bottom 对齐；</div>
    <hr />
<div>这是一个 <img class="middle" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> a middle 对齐～</div>
    <hr />
</table>

/* CSS */
img.top { vertical-align: text-top; }
img.bottom { vertical-align: text-bottom; }
img.middle { vertical-align: middle; }

 ⬅️  效果图

参考文章 | Reference List

MDN CSS Table: developer.mozilla.org/zh-CN/docs/…

avatar
文章
阅读
粉丝