HTML表格：最后一列自动宽度

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>