如何为 <td> 设置固定宽度而不考虑其内容
主题:HTML / CSS
答案:使用 CSS table-layout 属性
如果您尝试通过简单地应用 width<td>table-layoutfixed，然后 width 属性将生效。
以下示例将为表格列设置固定宽度，而不管其单元格中的文本量如何。 让我们尝试一下以了解它的基本工作原理:
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>为表格列设置固定宽度</title>
<style>
table {
width: 300px;
}
th, td {
width: 50%;
}
table.fixed {
table-layout: fixed;
}
table, th, td{
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<caption>Example 1. Auto</caption>
<tr>
<th>Name</th>
<th>Email</th>
</tr>
<tr>
<td>John Carter</td>
<td>johncarter@example.com</td>
</tr>
</table>
<br>
<table class="fixed">
<caption>Example 2. Fixed</caption>
<tr>
<th>Name</th>
<th>Email</th>
</tr>
<tr>
<td>Peter Parker</td>
<td>peterparker@example.com</td>
</tr>
</table>
</body>
</html>FAQ 相关问题解答
以下是与此主题相关的更多常见问题解答:
