HTML固定表格宽度

作者：System 时间：2024年08月18日分类：所有,html 字数：654

要在HTML中设置固定宽度的表格，您可以使用CSS的width属性来指定表格的宽度。以下是一个简单的例子：

HTML:




<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
  <!-- 更多行和列... -->
</table>

CSS:




table {
  width: 500px; /* 设置表格的固定宽度为500像素 */
  border-collapse: collapse; /* 移除表格的边框间的间隔 */
}
 
th, td {
  border: 1px solid black; /* 为表头和单元格添加边框 */
  padding: 5px; /* 设置内边距 */
  text-align: left; /* 设置文本对齐方式 */
}

在这个例子中，table的宽度被设置为500像素，并且通过border-collapse: collapse;移除了表格的边框间的间隔，使得整个表格看起来像是单一的布局单位。同时，为th和td元素添加了边框和一些内边距，使得表格更加美观。

HTML固定表格宽度

评论已关闭

推荐阅读