如何在表格中设置 td 的固定宽度？

要将固定宽度设置为表格的 <td> 元素，我们可以使用多种方法。但在那之前，我们需要了解 <td> 元素。

HTML <td> 元素定义了 HTML 表格中的数据单元格。它用于在表格中显示数据，例如文本、图像或链接。每个 <td> 元素都包含在 <tr> 元素中，后者表示表格中的行。

固定表格单元格宽度

当表格在网页上显示时，保持表格外观一致且易于阅读非常重要。我们可以通过为表格中的 <td> 元素设置固定宽度轻松实现这一点。通过这种方式，我们确保表格中的每一列都具有相同的宽度，从而使用户更容易查找信息。

设置固定 <td> 宽度的几种方法

固定 <td> 宽度的示例

以下示例将通过代码说明每种方法。

使用 HTML width 属性

要设置单元格宽度，我们可以在 <td> 标签内使用 HTML width 属性以及指定像素值。

<!DOCTYPE html>
<html>
<body>
   <table border = "1px">
      <tr>
         <td width="100px">Content 1</td>
         <td width="150px">Content 2</td>
      </tr>
      <tr>
         <td>Content 3</td>
         <td>Content 4</td>
      </tr>
      <tr>
         <td>Content 5</td>
         <td>Content 6</td>
      </tr>
   </table>
</body>
</html>

使用 CSS width 属性

要设置单元格宽度，我们可以在 <td> 标签上使用 CSS width 属性以及指定像素值。

<!DOCTYPE html>
<html>
<head>
    <style>
          td {
             width: 100px;
          }
    </style>
</head>
<body>
   <table border = "1px">
      <tr>
         <td width="100px">Content 1</td>
         <td width="150px">Content 2</td>
      </tr>
      <tr>
         <td>Content 3</td>
         <td>Content 4</td>
      </tr>
      <tr>
         <td>Content 5</td>
         <td>Content 6</td>
      </tr>
   </table>
</body>
</html>

更新于: 2024年8月22日

9K+ 浏览量

开启你的 职业生涯

通过完成课程获得认证

立即开始
广告