子表格宽度为100%，延伸至父元素

Question

子表格宽度为100%，延伸至父元素

3

目前我正在尝试创建一个子表，它可以具有超过父级100％的宽度。因此，它们应该具有滚动条。但是，当我使用以下css尝试这样做时，子项具有滚动条，并且由于某种原因扩展了父容器的宽度。如果我使用静态大小（如500px），则可以正常工作，但是使用100％的宽度会失败。

HTML

（简化）

<main class="main">
    <table>
        <tr>
            <td>...</td>
            <td>...</td>
        </tr>
        <tr>
            <td>...</td>
            <td>...</td>
        </tr>
        <tr>
            <td>...</td>
            <td>...</td>
        </tr>
    </table>
</main>

CSS

层叠样式表

.main {
    margin: 0 10%;
    padding: 00;
    width: 80%;
    display: table;
}

table {
    margin: 0;
    padding: 0;
    width: 100%;
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

片段

静态宽度为500px的示例

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      margin: 0;
      padding: 0;
      width: 100%;
      background-color: green;
    }
    
    .main {
      margin: 0 10%;
      padding: 00;
      width: 80%;
      display: table;
    }
    
    table {
      margin: 0;
      padding: 0;
      width: 500px;
      display: block;
      overflow-x: auto;
      white-space: nowrap;
    }
  </style>
</head>

<body>
  <main class="main">
    <table>
      <tr>
        <td>A very very very veeeeeeeeeeeeeeeeeeeeery loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong line</td>
        <td>...</td>
      </tr>
      <tr>
        <td>...</td>
        <td>...</td>
      </tr>
      <tr>
        <td>...</td>
        <td>...</td>
      </tr>
    </table>
  </main>
</body>

</html>

动态宽度为100％的示例

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      margin: 0;
      padding: 0;
      width: 100%;
      background-color: green;
    }
    
    .main {
      margin: 0 10%;
      padding: 00;
      width: 80%;
      display: table;
    }
    
    table {
      margin: 0;
      padding: 0;
      width: 100%; /* PROBLEM */
      display: block;
      overflow-x: auto;
      white-space: nowrap;
    }
  </style>
</head>

<body>
  <main class="main">
    <table>
      <tr>
        <td>A very very very veeeeeeeeeeeeeeeeeeeeery loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong line</td>
        <td>...</td>
      </tr>
      <tr>
        <td>...</td>
        <td>...</td>
      </tr>
      <tr>
        <td>...</td>
        <td>...</td>
      </tr>
    </table>
  </main>
</body>

</html>

谢谢！

- Luca

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Temani Afif · Accepted Answer

你需要使用table-layout:fixed;^参考资料。自动布局可能会产生意外的结果。

固定表格布局通过这种（快速）算法实现，水平布局不取决于单元格的内容，只取决于表格的宽度、列的宽度以及边框或单元格间距。

另外值得一提的是，无论是否使用width:100%都会出现同样的问题。

body {
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: green;
}

.main {
  margin: 0 10%;
  padding: 00;
  width: 80%;
  display: table;
}

table {
  margin: 0;
  padding: 0;
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}

<main class="main">
  <table>
    <tr>
      <td>A very very very veeeeeeeeeeeeeeeeeeeeery loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong line</td>
      <td>...</td>
    </tr>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
  </table>
</main>
<main class="main" style="table-layout: fixed;">
  <table>
    <tr>
      <td>A very very very veeeeeeeeeeeeeeeeeeeeery loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong line</td>
      <td>...</td>
    </tr>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
  </table>
</main>