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>