Question

我有一个html表，如：

<table width="100%" cellspacing="1" cellpadding="2" align="center" border="0">
<tr>
    <td width="7%"></td>
    <td width="21%"></td>
    <td width="32%"></td>
    <td width="20%"></td>
    <td width="20%"></td>
</tr>
</table>

这样做很好，但有时候如果5号列的内容很大，那么4号列会收缩，这些列的宽度不会相等

Answer 1

我猜你所要找的是word-break: break-all;上的<td>风格。

＆＃13;

.table-style td {
  border: solid 1px;
}

.td-break-word {
  word-break: break-all;
}

＆＃13;

<table class="table-style"  width="100%" cellspacing="1" cellpadding="2" align="center" border="0">
<tr>
    <td width="7%">text</td>
    <td width="21%">text</td>
    <td width="32%">text</td>
    <td width="20%">text</td>
    <td width="20%" class="td-break-word">texttexttexttexttexttexttexttexttexttexttexttexttexttext</td>
</tr>
</table>

＆＃13;

Answer 2

您需要添加。表{ table-layout：fixed;}和.table tr td { 自动换行：打破字; text-align：center;}用于根据宽度应用宽度和文本

＆＃13;

.table{
table-layout:fixed;}
.table tr td{
word-wrap:break-word;
text-align:center;}

＆＃13;

<table width="100%" cellspacing="1" cellpadding="2" align="center" border="0" class="table">
<tr>
    <td width="7%">ew</td>
    <td width="21%">ewwe</td>
    <td width="32%">weew</td>
    <td width="20%">ewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewew</td>
    <td width="20%">eweweew</td>
</tr>
</table>

＆＃13;

Answer 3

因为你正在尝试打印一个大字符串。如果有空格，则会根据宽度自动打破单词。使用下面的CSS来修复它。

 tr td {
    word-wrap: break-word;
 }

PS：字符串将分为多行。这行可能看起来很长。

固定宽度的html表列

3 个答案: