如何为 <td> 设置固定宽度而不考虑其内容
主题：HTML / CSS上一页|下一页
答案：使用 CSS table-layout 属性
如果您尝试通过简单地应用 width 属性为表格列或 <td> 设置固定宽度，它可能不起作用，因为默认表格布局算法是自动的。 因此，首先将表格的 table-layout 属性更改为 fixed，然后 width 属性将生效。
以下示例将为表格列设置固定宽度，而不管其单元格中的文本量如何。 让我们尝试一下以了解它的基本工作原理：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Set Fixed Width for Table Columns</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 相关问题解答
以下是与此主题相关的更多常见问题解答：
Advertisements