Таблицы HTML: скользкий заголовок и автоматическая ширина последнего столбца

Question

Я не прибыл ( кодовая ручка здесь ) в auto-width последний столбец в этой таблице (теле), который должен иметь липкие заголовки (отметьте его на большой экран):

table.fixed-header {
  width: 100%;
  table-layout: fixed;
  border: 1px solid red;
  border-collapse: collapse;
}

thead tr {
  display: block;
  position: relative;
}

tbody {
  display: block;
  overflow: auto;
  width: 100%;
  height: 300px;
}

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;
}

th:last-child,
td:last-child {
  width: auto;
}

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

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

th,
td {
  padding: 5px;
}

td {
  border-left: 1px solid darkgray;
}

.colored {
  background: lightgreen;
}

caption {
  caption-side: top;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <h3>Sticky header example</h3>
  <div class="col-md-10 col-md-offset-1 colored">
    <table class="fixed-header">
      <caption align="top">Requirements: sticky header, fill the remaining container, 3 rows height and vertical scroll</caption>
      <thead>
        <tr>
          <th>Id (100px)</th>
          <th>Name (200px)</th>
          <th>Description (auto)</th>
        </tr>
      </thead>
      <tr>
        <td>654</td>
        <td>name 1</td>
        <td>this is a description</td>
      </tr>
      <tr>
        <td>963</td>
        <td>name 2</td>
        <td>this is the second description</td>
      </tr>
      <tr>
        <td>753</td>
        <td>name 3</td>
        <td>this is the third description</td>
      </tr>
      <tr>
        <td>224</td>
        <td>name 4</td>
        <td>this is the third description</td>
      </tr>
      <tr>
        <td>687</td>
        <td>name 5</td>
        <td>this is the third description</td>
      </tr>
      <tr>
        <td>354</td>
        <td>name 6</td>
        <td>this is the third description</td>
      </tr>
      <tr>
        <td>965</td>
        <td>name 7</td>
        <td>this is the third description</td>
      </tr>
      <tr>
        <td>456</td>
        <td>name 8</td>
        <td>this is the third description</td>
      </tr>
      <tr>
        <td>789</td>
        <td>name 9</td>
        <td>this is the third description</td>
      </tr>
    </table>
  </div>
</div>

Answer 1

Используйте следующее:

, чтобы сделать последний столбец полной ширины

tr{
    display : flex;
}

IE не поддерживает flex. Итак, добавьте следующее

td:last-child{
    flex: 1;
    display: inline-block;
}

Для заполнения контейнера на высоту 300px

tbody{
    display: inline;
}

Полный код:

http://jsfiddle.net/j1wfm30d/

Answer 2

Ваш thead tr имеет display:block. Добавьте те же правила для tbody tr

tbody {
    display: block;
    overflow: auto;
    width: 100%;
    height: @table_body_height;
    tr {
      display: block;
      position: relative;
    }
  }

ОБНОВИТЬ

ОП сделал этот комментарий:

небольшая проблема заключается в том, что столбец «name» теперь не поддерживает длинные имена, которые должны быть усечены и эллипсированы, если, скажем, для «name 2» мы поставили «это длинное длинное имя столбца»

В этом случае я бы поместил текст в <span>, например, и использовал бы и использовал многоточие на этом отрезке:

td span {
      display:block;
      white-space: nowrap;
      max-width:150px;
      overflow: hidden;
      text-overflow: ellipsis;
    }

Это пример кода:

table.fixed-header {
  width: 100%;
 
  table-layout: fixed;
  border: 1px solid red;
  border-collapse: collapse;
}

tr {
  display: block;
  position: relative;
}

tbody {
  display: block;
  overflow: auto;
  width: 100%;
  height: 100px;
}

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

td span {
  display:block;
  white-space: nowrap;
  max-width:150px;
  overflow: hidden;
  text-overflow: ellipsis;
}



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

th:last-child,
td:last-child {
  width: auto;
}

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

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

th,
td {
  padding: 5px;
}

td {
  border-left: 1px solid darkgray;
}

.colored {
  background: lightgreen;
}

caption {
  caption-side: top;
}

<div class="container">
  <h3>Sticky header example</h3>
  <div class="col-md-10 col-md-offset-1 colored">
    <table class="fixed-header">
      <caption align="top">Requirements: sticky header, fill the remaining container, 3 rows height and vertical scroll</caption>
      <thead>
        <tr>
          <th>Id (100px)</th>
          <th>Name (200px)</th>
          <th>Description (auto)</th>
        </tr>
      </thead>
      <tr>
        <td>654</td>
        <td>name 1</td>
        <td>this is a description</td>
      </tr>
      <tr>
        <td>963</td>
        <td><span>name 2 this is a very very long name</span></td>
        <td>this is the second description</td>
      </tr>
      <tr>
        <td>753</td>
        <td>name 3</td>
        <td>this is the third description</td>
      </tr>
      <tr>
        <td>224</td>
        <td>name 4</td>
        <td>this is the third description</td>
      </tr>
      <tr>
        <td>687</td>
        <td>name 5</td>
        <td>this is the third description</td>
      </tr>
      <tr>
        <td>354</td>
        <td>name 6</td>
        <td>this is the third description</td>
      </tr>
      <tr>
        <td>965</td>
        <td>name 7</td>
        <td>this is the third description</td>
      </tr>
      <tr>
        <td>456</td>
        <td>name 8</td>
        <td>this is the third description</td>
      </tr>
      <tr>
        <td>789</td>
        <td>name 9</td>
        <td>this is the third description</td>
      </tr>
    </table>
  </div>
</div>