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

html-css010

如何用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写入html标签中，宽度的话，只要设置第一行即可。如下

<div>

<table>

<tr>

<td style="width:90">12</td>

<td>3</td>

</tr>

<tr>

<td>4</td><td>5</td>

</tr>

</table>

</div>

方法二：添加class

css写成 div.classA table td{width:90}

这样，只有class属性为classA的div里面的table才会套用该样式

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

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%

}

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

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