100% 宽度 table 三列 div

Question

我正在尝试在 div 中制作一个带有 table 的网页。 table 的宽度为 100%，包含三列。但是，当我调整 window 大小时，table 不会调整其宽度。

这是我正在使用的代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>

<body>
<div style="width: 1400px; margin-left: auto; margin-right: auto">
  <table width="100%" border="0">
    <tbody>
      <tr>
        <td style="background-color: aqua; padding-left: 10px; padding-right: 10px; padding-top: 10px">Text.</td>
        <td style="background-color: #DD185B; padding-left: 10px; padding-right: 10px; padding-top: 10px">Text.</td>
        <td style="background-color: aqua; padding-left: 10px; padding-right: 10px; padding-top: 10px">Text.</td>
      </tr>
    </tbody>
  </table>
</div>
</body>
</html>

Answer 1

table 的宽度是父元素的 100%，在本例中是您的 div。您的 div 设置为 1400px，因此 table 也是 1400px。

Answer 2

div宽度固定css属性。

https://jsfiddle.net/jst9u4zv/

<div style="margin-left: auto; margin-right: auto">
  <table width="100%" border="0">
    <tbody>
      <tr>
        <td style="background-color: aqua; padding-left: 10px; padding-right: 10px; padding-top: 10px">Text.</td>
        <td style="background-color: #DD185B; padding-left: 10px; padding-right: 10px; padding-top: 10px">Text.</td>
        <td style="background-color: aqua; padding-left: 10px; padding-right: 10px; padding-top: 10px">Text.</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 3

只需将您的 width: 1400px 更改为 max-width: 1400px;

宽度是固定的，最大宽度是您可以达到的最大值。

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Test</title>
</head>

<body>
  <div style="max-width: 1400px; margin-left: auto; margin-right: auto">
    <table width="100%" border="0">
      <tbody>
        <tr>
          <td style="background-color: aqua; padding-left: 10px; padding-right: 10px; padding-top: 10px">Text.</td>
          <td style="background-color: #DD185B; padding-left: 10px; padding-right: 10px; padding-top: 10px">Text.</td>
          <td style="background-color: aqua; padding-left: 10px; padding-right: 10px; padding-top: 10px">Text.</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

100% 宽度 table 三列 div

100% width table with three colums in div

html

html-table

width