CSS 表格属性

html-css020

CSS 表格属性,第1张

CSS表格属性用于设置HTML表格的样式，HTML表格由 <table></table> 标签嵌套 <tbody>， <tr>， <td>等标签组成，一个HTML表格默认至少包含table，tbody，tr，td四个元素。

CSS表格属性：

显示表格边框有时候特别重要，它能让表格结构更清晰。

默认的表格有双边框，这是因为表和th/ td元素有独立的边界。border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开。

如果是简单的表格，直上直下没有跨列或者跨行的：

td { text-overflow:ellipsiswhite-space:nowrapoverflow:hidden} /* 设置不换行 省略号显示*/

然后只需要再给第一行的td分别加上class，例如：

<tr>

<td class="item1">单元格</td>

<td class="item2">单元格</td>

<td class="item3">单元格</td>

<td class="item4">单元格</td>

<td class="item5">单元格</td>

<td class="item6">单元格</td>

</tr>

然后，分别设置宽度

.item1 { width:20% }

....

.item6 { width:5% }

其他行同列的单元格会被撑开

比较复杂的有跨列或者跨行的表格，设置方法类似，但是就是要计算一下，比较麻烦。