HTML 表格属性的最小宽度和最大高度

在本文中，我们将介绍HTML表格属性的最小宽度（min-width）和最大高度（max-height）的用法和示例。

阅读更多：HTML 教程

最小宽度（min-width）

最小宽度（min-width）属性用于设置表格的最小宽度，即表格的内容不会被压缩到小于这个宽度。这个属性可以在表格标签（<table>）或表格单元格标签（<td>或<th>）中使用。

下面是一个例子，演示了如何使用最小宽度属性：

<!DOCTYPE html>
<html>
<head>
<style>
table {
  min-width: 300px; /* 设置表格的最小宽度为300像素 */
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>30</td>
  </tr>
</table>

</body>
</html>

在上面的例子中，我们设置了表格的最小宽度为300像素。即使窗口调整到小于300像素，表格的宽度也不会变得更小。

最大高度（max-height）

最大高度（max-height）属性用于设置表格的最大高度，即表格的内容不会超过这个高度。这个属性可以在表格标签（<table>）或表格单元格标签（<td>或<th>）中使用。

下面是一个例子，演示了如何使用最大高度属性：

<!DOCTYPE html>
<html>
<head>
<style>
table {
  max-height: 200px; /* 设置表格的最大高度为200像素 */
  overflow-y: auto; /* 设置垂直滚动条，如果表格内容超过了最大高度 */
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <!-- 添加更多的行... -->
  <!-- 添加更多的行... -->
  <!-- 添加更多的行... -->
  <!-- 添加更多的行... -->
  <!-- 添加更多的行... -->
  <!-- 添加更多的行... -->
</table>

</body>
</html>