javascript - CSS 分离头表技巧 : keep verticall scrollbar on screen and last cell go full width

Question

我正在构建一个带有分离标题的自定义表格。这意味着表格行内容可以滚动，而表格标题保持可见。

除了我需要完成的 2 件小事外，我就快完成了。

问题 1:我需要始终保持我的垂直条可见，但是当我的列数超过宽度时，水平滚动条出现并将我的垂直条发送到列的右侧，使其消失:

问题 2:我需要能够扩展最后一列以填充整个宽度，即使还有剩余空间:

我宁愿使用纯 JavaScript，而不是 jQuery。

JSFiddle

<p>
Problem 1: How to keep the vertical scrollbar on view
</p>

<div class="container1">
  <table>
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
        <th>Column 5</th>
        <th>Column 6</th>
        <th>Column 7</th>
        <th>Column 8</th>
      </tr>

    </thead>
    <tbody>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
        <td>Data 4</td>
        <td>Data 5</td>
        <td>Data 6</td>
        <td>Data 7</td>
        <td>Data 8</td>
      </tr>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
        <td>Data 4</td>
        <td>Data 5</td>
        <td>Data 6</td>
        <td>Data 7</td>
        <td>Data 8</td>
      </tr>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
        <td>Data 4</td>
        <td>Data 5</td>
        <td>Data 6</td>
        <td>Data 7</td>
        <td>Data 8</td>
      </tr>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
        <td>Data 4</td>
        <td>Data 5</td>
        <td>Data 6</td>
        <td>Data 7</td>
        <td>Data 8</td>
      </tr>

    </tbody>
  </table>
</div>


<p>
Problem 2: How to make the last cell go full width
</p>

<div class="container2">
  <table>
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
        <th>Column 5</th>
      </tr>

    </thead>
    <tbody>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
        <td>Data 4</td>
        <td>Data 5</td>
      </tr>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
        <td>Data 4</td>
        <td>Data 5</td>
      </tr>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
        <td>Data 4</td>
        <td>Data 5</td>
      </tr>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
        <td>Data 4</td>
        <td>Data 5</td>
      </tr>

    </tbody>
  </table>
</div>


.container1 table,
.container1 th,
.container1 td {
  background-color: white;
  padding: 5px;
  font-size: 15px;
  border: 1px solid black;
  border-collapse: collapse;
  min-width: 50px;
  max-width: 50px;
}


.container1 {
  max-width: 100%;
  width: 100%;
  overflow-x: scroll;
}

.container1 table tbody,
.container1 table thead {
  display: block;
}

.container1 table tbody {
  overflow-y: scroll;
  height: 50px;
}



.container2 table,
.container2 th,
.container2 td {
  background-color: white;
  padding: 5px;
  font-size: 15px;
  border: 1px solid black;
  border-collapse: collapse;
  min-width: 50px;
  max-width: 50px;
}

.container2 th:last-child,
.container2 td:last-child {
  background-color: yellow;
  min-width: 50px;
  max-width: 100%;
}


.container2 {
  max-width: 100%;
  width: 100%;
  overflow-x: scroll;
}

.container2 table tbody,
.container2 table thead {
  display: block;
}

.container2 table tbody {
  overflow-y: scroll;
  height: 50px;
}

Answer 1

标题固定且主体滚动的表格

我使用纯 javascript 做了一个小函数，并对您的 html 进行了轻微修改以包含一个可滚动的 div。

function setWidth(container) {
  var 
  tds = document.querySelectorAll("." + container + " .scroll table tr:first-child td"),
  ths = document.querySelectorAll("." + container + ">table tr:first-child th");
  for (var i = 0; i < tds.length - 1; i++) {
    ths[i].style.width = tds[i].clientWidth - 2 + 'px';
  }
}
setWidth("container1");
setWidth("container2");

table {
  font-size: 15px;
  border-collapse: collapse;
  margin: 0 0 -1px 0;
  table-layout: fixed;
  width: 100%;
}
td, th {
  border: 1px solid black;
}
td:last-child,
th:last-child {
  width: auto;
}
.scroll {
  height: 50px;
  overflow-y: scroll;
}
.container2 th:last-child,
.container2 td:last-child {
  background-color: yellow;
}

<p>
Problem 1: How to keep the vertical scrollbar on view
</p>

<div class="container1">
  <table>
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
        <th>Column 5</th>
        <th>Column 6</th>
        <th>Column 7</th>
        <th>Column 8</th>
      </tr>
    </thead>
  </table>
  <div class="scroll">
  <table>
    <tbody>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
        <td>Data 4</td>
        <td>Data 5</td>
        <td>Data 6</td>
        <td>Data 7</td>
        <td>Data 8</td>
      </tr>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
        <td>Data 4</td>
        <td>Data 5</td>
        <td>Data 6</td>
        <td>Data 7</td>
        <td>Data 8</td>
      </tr>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
        <td>Data 4</td>
        <td>Data 5</td>
        <td>Data 6</td>
        <td>Data 7</td>
        <td>Data 8</td>
      </tr>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
        <td>Data 4</td>
        <td>Data 5</td>
        <td>Data 6</td>
        <td>Data 7</td>
        <td>Data 8</td>
      </tr>

    </tbody>
  </table>
  </div>
</div>


<p>
Problem 2: How to make the last cell go full width
</p>

<div class="container2">
  <table>
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
        <th>Column 5</th>
      </tr>
    </thead>
  </table>
  <div class="scroll">
  <table>
    <tbody>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
        <td>Data 4</td>
        <td>Data 5</td>
      </tr>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
        <td>Data 4</td>
        <td>Data 5</td>
      </tr>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
        <td>Data 4</td>
        <td>Data 5</td>
      </tr>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
        <td>Data 4</td>
        <td>Data 5</td>
      </tr>

    </tbody>
  </table>
</div>
</div>