HTML 表 : last column width auto

Question

我有这个CodePen .我愿意这样

a) 表格填充父级的宽度
b) 最后一列填补空白
c) a 列和 b 列固定 (100 & 200)px

table {
  width: 100%;
  table-layout: fixed;
  border: 1px solid lightgray;
}

td {
  overflow: hidden;
  text-overflow: ellipsis;
}

th:nth-child(2);
td:nth-child(2) {
  min-width: 200px;
  max-width: 200px;
}

th:nth-child(1),
td:nth-child(1) {
  min-width: 100px;
  max-width: 100px;
}

thead,
tbody>tr:nth-child(even) {
  background-color: #ffffff;
}

tbody>tr:nth-child(odd) {
  background-color: lightblue;
}

.red {
  background: red;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-xs-10 col-xs-offset-1 red">
  hello
  <table>
    <thead>
      <tr>
        <th>Id (100px)</th>
        <th>Name (200px)</th>
        <th>Description (auto)</th>
      </tr>
    </thead>
    <tr>
      <td>654</td>
      <td>987</td>
      <td>this is a description</td>
    </tr>
    <tr>
      <td>963</td>
      <td>147</td>
      <td>this is the second description</td>
    </tr>
    <tr>
      <td>753</td>
      <td>951</td>
      <td>this is the third description</td>
    </tr>
  </table>
</div>

Answer 1

使用 width 而不是 max-width 和 min-width 你得到一个 ; 而不是 , 在第二列规则中。

table {
  width: 100%;
  table-layout: fixed;
  border: 1px solid lightgray;
}

td {
  overflow: hidden;
  text-overflow: ellipsis;
}

th:nth-child(2),
td:nth-child(2) {
  width: 200px;
}

th:nth-child(1),
td:nth-child(1) {
  width: 100px;
}

thead,
tbody>tr:nth-child(even) {
  background-color: #ffffff;
}

tbody>tr:nth-child(odd) {
  background-color: lightblue;
}

.red {
  background: red;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-xs-10 col-xs-offset-1 red">
  hello
  <table>
    <thead>
      <tr>
        <th>Id (100px)</th>
        <th>Name (200px)</th>
        <th>Description (auto)</th>
      </tr>
    </thead>
    <tr>
      <td>654</td>
      <td>987</td>
      <td>this is a description</td>
    </tr>
    <tr>
      <td>963</td>
      <td>147</td>
      <td>this is the second description</td>
    </tr>
    <tr>
      <td>753</td>
      <td>951</td>
      <td>this is the third description</td>
    </tr>
  </table>
</div>