固定宽度的html表格列

【问题标题】：html table columns of fixed width固定宽度的html表格列
【发布时间】：2018-09-05 10:11:14
【问题描述】：

我有一个像这样的 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 列会缩小并且这些列的宽度不会保持相等

【问题讨论】：

你能在你的代码中显示确切的问题吗？
任何演示小提琴/sn-p??
Fixed Table Cell Width的可能重复
尝试在标签内使用
标签，宽度：100%
Fixed Table Cell Width

标签： html css

【解决方案1】：

您需要添加。桌子{ 表布局：固定；} 和 .table tr td{ 自动换行：断词； text-align:center;} 用于根据宽度应用宽度和文本

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

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

【讨论】：

【解决方案2】：

我猜你正在寻找的是你的<td> 上的word-break: break-all; 样式。

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

.td-break-word {
  word-break: break-all;
}

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

【讨论】：

【解决方案3】：

这是因为您试图打印一个大字符串。如果有空格，单词会自动按照宽度进行分词。使用下面的 CSS 来修复它。

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

PS：字符串会被分成多行。该行可能看起来很长。

【讨论】：