工作台宽度超过容器宽度

Question

在下面的代码中，表的宽度为什么超出了容器的宽度（示例中为5.11.3）？如何解决？

200px

.container {
  width: 200px;
  display: flex;
  flex-direction: column;
  background-color: #cdcdcd;
}

.simple-table {
  width: 100%;
  font-size: 12px;
  display: flex;
  flex-direction: column;
}

.simple-table-title {
  font-size: 14px;
}

.simple-table-big-font {
  font-size: 16px;
}

.simple-table table {
  width: 100%;
  border-collapse: collapse;
  background-color: black;
}

.simple-table thead,
tbody {
  width: 100%;
}

.simple-table thead tr {
  background-color: grey;
}

.simple-table tbody tr {
  background-color: grey;
}

.simple-table table tbody td {
  padding: 5px 10px 5px 10px;
  border: 1px solid green;
}

.simple-table table thead td {
  padding: 5px 10px 5px 10px;
  border: 1px solid green;
}

.simple-table-title {
  padding-bottom: 5px;
}

Answer 1

您可以使用table-layout: fixed并将overflow: hidden设置为table：

.container {
  width: 200px;
  display: flex;
  flex-direction: column;
  background-color: #cdcdcd;
}

.simple-table {
  width: 100%;
  font-size: 12px;
  display: flex;
  flex-direction: column;
}

.simple-table-title {
  font-size: 14px;
}

.simple-table-big-font {
  font-size: 16px;
}

.simple-table table {
  width: 100%;
  table-layout: fixed;  /* add table layout fixed */
  overflow: hidden; /* add overflow hidden */
  border-collapse: collapse;
  background-color: black;
}

.simple-table thead,
tbody {
  width: 100%;
}

.simple-table thead tr {
  background-color: grey;
}

.simple-table tbody tr {
  background-color: grey;
}

.simple-table table tbody td {
  padding: 5px 10px 5px 10px;
  border: 1px solid green;
}

.simple-table table thead td {
  padding: 5px 10px 5px 10px;
  border: 1px solid green;
}

.simple-table-title {
  padding-bottom: 5px;
}

<div class="container">
  <div>
    <h1>TEST</h1>
  </div>
  <div class="simple-table ">
    <div class="simple-table-title">Title:</div>
    <table>
      <thead>
        <tr>
          <td>Column 1:</td>
          <td>Column 2:</td>
          <td>Column 3:</td>
          <td>Long Column:</td>
          <td>Long Column:</td>
          <td>Very Long Column:</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>100</td>
          <td>10%</td>
          <td>All</td>
          <td>THIS IS A LONG TEXT</td>
          <td>THIS IS A LONG TEXT</td>
          <td>THIS IS A VERY VERY LONG LONG TEXT</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>