要将HTML5表格宽度缩小，可以使用CSS样式来控制表格的宽度，下面是一个详细的步骤：
（图片来源网络，侵删）
1、在HTML文档中创建一个表格元素（<table>），并在其中添加行和列，每个行使用<tr>标签表示，每个列使用<td>标签表示。
<table>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
2、接下来，使用CSS样式来控制表格的宽度，可以在HTML文档的<head>部分或外部CSS文件中定义样式，以下是两种方法的示例：
方法一：在HTML文档的<head>部分内定义样式：
<style>
table {
width: 50%; /* 设置表格宽度为父容器宽度的50% */
bordercollapse: collapse; /* 合并相邻边框 */
}
th, td {
border: 1px solid black; /* 设置边框样式 */
padding: 8px; /* 设置内边距 */
textalign: left; /* 设置文本对齐方式 */
}
</style>
将上述代码添加到HTML文档的<head>部分，即可应用样式到表格上。
方法二：在外部CSS文件中定义样式：
创建一个外部CSS文件（styles.css），并将以下代码添加到该文件中：
table {
width: 50%; /* 设置表格宽度为父容器宽度的50% */
bordercollapse: collapse; /* 合并相邻边框 */
}
th, td {
border: 1px solid black; /* 设置边框样式 */
padding: 8px; /* 设置内边距 */
textalign: left; /* 设置文本对齐方式 */
}
在HTML文档中引用该CSS文件，使用<link>标签将外部CSS文件链接到HTML文档中：
<link rel="stylesheet" href="styles.css">
确保将上述代码放置在<head>部分内，现在，表格将根据定义的样式进行渲染，宽度缩小为父容器宽度的50%。
原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/439966.html
微信扫一扫