如何用CSS控制表格每列的宽度？

html-css078

如何用CSS控制表格每列的宽度？,第1张

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

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% }

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

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

CSS中宽度和高度分别可以通过width和height实现，那么对于单元格的宽度和高度，则可以通过如下样式来设置

td{ width:100px height:50px} /*设置单元格宽度100px，高度50px*/

示例如下：

给出HTML元素

<table>

<tr><td>1</td><td>2</td><td>345</td></tr>

<tr><td>6789</td><td>10</td><td>11</td></tr>

</table>

设置单元格高度和宽度样式

table{border-collapse:collapse}

td{

border: 1px solid green /*边框*/

width:100px             /*单元格宽度*/

height:50px             /*单元格高度*/

text-align:center       /*单元格文字居中对齐*/

}

效果如下

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

td

{

text-overflow

:ellipsis

white-space

:nowrap

overflow: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%

}

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

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