HTML表格：光滑的标题和最后一列的自动宽度

Question

我没有到达codepen is here来自动宽度该表（正文）中的最后一列，该列应具有粘性标题（在大屏幕上检查） ：

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

您的thead tr有display:block。为tbody tr

添加相同的规则

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

更新

OP发表了此评论：

  

小问题是，“名称”列现在不支持将长名称截断和省略，如果说“名称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>

Answer 2

使用以下内容：

使最后一列全宽

tr{
    display : flex;
}

IE不支持flex。因此，添加以下内容

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

要填充高度为300px的容器

tbody{
    display: inline;
}

完整代码：

http://jsfiddle.net/j1wfm30d/