表格table列宽度怎么设置都没用_教程

在对设置表格设置table-layer:fixed样式后，发现表格中有一行合并过，其它没有合并的行的列宽会平均化，对列宽的设置会失效。

请看如下代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<tbody>

<tr>

</tr>

<tr>

<td style="width:60%">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td>

<td style="width:20%">ddddd</td>

<td style="width:20%">CCCCCCCC</td>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</body>

</html>

如果把表格的合并行去掉，又能正常显示。

原因：

table-layout: fixed 的表格，各列宽度由第一行决定，后面指定的宽度会被忽略。

你第一行合并了，所以各列宽度均分了。

解决方法：

在tbody前加

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<tbody>

<tr>

</tr>

<tr>

<td style="width:60%">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td>

<td style="width:20%">ddddd</td>

<td style="width:20%">CCCCCCCC</td>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</body>

</html>

1.table 设置宽度，绝对宽度和相对都可以

table-layout:fixed

设置了这个属性，其余所有td都是相同的宽度。

这样 *** 作之后，table是宽度固定了，但是里面的文章如果很长，文字会覆盖

解决办法：

在 td 里面加上 style="word-wrap:break-word" 自动换行就好了，如果不想换行，可以将超出内容设为隐藏，并且用省略号代替：

在td上面加

overflow:hidden

white-space:nowrap

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/tougao/7720691.html

表格table列宽度怎么设置都没用

发表评论

评论列表（0条）