使用表格时，我们可能会遇到设置表格宽度的困难，这与单元格中的文本数量无关。
有时，当列的其中一个单元格中的文本太长时，列的宽度会发生变化。
在此代码中，我们将演示如何逐步解决此问题，然后我们可以尝试完整示例。
创建 HTML
- 使用 <table> 元素。
- 添加两个 <tr> 元素，其中每个元素都带有 <th> 元素。
<table>
<tr>
<th>header 1235466549845</th>
<th>header 2, Hello World</th>
</tr>
<tr>
<td>经历过风雨，才懂得阳光的温暖。</td>
<td>今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。</td>
</tr>
</table>
添加 CSS
- 指定 <table> 元素的边框和宽度属性，并将 table-layout 设置为“fixed”。
- 指定 <th> 和 <td> 元素的边框和宽度属性。
table {
border: 1px solid #666;
table-layout: fixed;
width: 180px;
}
th,
td {
border: 1px solid #666;
width: 90px;
overflow: hidden;
}
现在，我们可以尝试完整示例。
设置表格列宽的示例：
<!DOCTYPE html>
<html>
<head>
<style>
table {
border: 1px solid #666;
table-layout: fixed;
width: 180px;
}
th,
td {
border: 1px solid #666;
width: 90px;
overflow: hidden;
}
</style>
</head>
<body>
<table>
<tr>
<th>header 1235466549845</th>
<th>header 2, Hello World</th>
</tr>
<tr>
<td>经历过风雨，才懂得阳光的温暖。</td>
<td>今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。</td>
</tr>
</table>
</body>
</html>
日期：2020-06-02 22:15:12 来源：oir作者：oir