📌  相关文章
📜  如何设置固定宽度<td>在一张桌子上？(1)

📅  最后修改于: 2023-12-03 15:24:55.152000             🧑  作者: Mango

设置固定宽度 <td> 在一张表格上

当我们需要在网页上展示数据表格时，经常会遇到需要设置表格单元格的宽度问题。本文将介绍如何使用 CSS 设置表格单元格 <td> 的固定宽度，以适应不同设备的显示。

使用 width 属性设置单元格宽度

可以使用 CSS 的 width 属性来设置表格单元格的宽度，示例代码如下：

<!DOCTYPE html>
<html>
<head>
	<style>
		table {
			width: 100%;
		}
		td {
			width: 100px;
		}
	</style>
</head>
<body>
	<table>
		<tr>
			<td>单元格 1</td>
			<td>单元格 2</td>
			<td>单元格 3</td>
		</tr>
	</table>
</body>
</html>

在上述示例代码中，我们将表格 table 的宽度设置为 100%，表示占满整个父元素。而单元格 td 的宽度则设置为 100px，表示固定宽度为 100 像素，可以根据实际需求进行调整。

使用 table-layout 属性设置表格布局

针对复杂的表格，我们可以使用 CSS 的 table-layout 属性来控制表格布局，示例代码如下：

<!DOCTYPE html>
<html>
<head>
	<style>
		table {
			width: 100%;
			table-layout: fixed;
		}
		th, td {
			padding: 8px;
			border: 1px solid #ccc;
			text-align: left;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		.col1 {
			width: 30%;
		}
		.col2 {
			width: 20%;
		}
		.col3 {
			width: 50%;
		}
	</style>
</head>
<body>
	<table>
		<thead>
			<tr>
				<th class="col1">列一</th>
				<th class="col2">列二</th>
				<th class="col3">列三</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td class="col1">单元格一</td>
				<td class="col2">单元格二</td>
				<td class="col3">单元格三</td>
			</tr>
		</tbody>
	</table>
</body>
</html>

在上述示例代码中，我们通过 table-layout: fixed 属性来设置表格布局为固定布局，这样可以使单元格的宽度按照设置的值来分配。同时，我们还设置了单元格的样式，包括边框、内边距、文本对齐等。值得一提的是，我们在单元格的样式中还设置了 white-space: nowrap 和 text-overflow: ellipsis 属性，可以使单元格文本超出部分省略，并不换行。

总结

通过本文的介绍，我们了解了如何使用 CSS 设置表格单元格的固定宽度，以应对不同设备的显示。同时，我们还介绍了如何使用 table-layout 属性来控制表格布局，以实现更加复杂的表格设计。在实际开发中，还可以根据实际需求应用不同的技巧，使表格更加美观、实用。