将表格主体显示为可滚动答案

【问题标题】：Display the body of table as scrollable将表格主体显示为可滚动
【发布时间】：2017-06-28 16:25:57
【问题描述】：

我尝试在 html 和 css 中创建漂亮的表格。所以这就是我目前所做的：https://jsfiddle.net/mrg0szzt/

如你所见，我有问题：

如果我将display:block 放在 tbody 上，我的所有数据都与第一列对齐...
如果我把display:table-header-group; 放在overflow-y: auto; 停止工作...

/* IT's just for the style, please jump to line 44 */

.gestion-table {
  background: white;
  margin: auto;
  width: 90%;
  border-collapse: collapse;
}

.gestion-table th {
  color: #D5DDE5;
  background: #1b1e24;
  font-size: 18px;
  padding: 10px;
  vertical-align: middle;
  border-right: 1px solid white;
}

.gestion-table tr {
  color: #666B85;
  font-size: 16px;
}

.gestion-table tr:hover td {
  background: #4E5066;
  color: #FFFFFF;
}

.gestion-table tr:nth-child(odd) td {
  background: #EBEBEB;
}

.gestion-table tr:nth-child(odd):hover td {
  background: #4E5066;
}

.gestion-table td {
  background: #FFFFFF;
  padding: 10px;
  font-size: 16px;
  border-right: 1px solid #C1C3D1;
}


/* HERE STARTS THE PROBLEM */

//Switch between the two display methods on the tbody and see the result
//I'm searching for scrollable tbody with max-height of 150px for example
.gestion-table thead {
  display: table-header-group;
  width: 100%;
}

.gestion-table tbody {
  //display:table-header-group;
  display: block;
  overflow-y: auto;
  width: 100%;
  max-height: 150px;
}

<table class="gestion-table">
  <thead>
    <tr>
      <th style="width: 15%;">Field 1 </th>
      <th style="width: 45%;">Field 2 </th>
      <th style="width: 10%;">Field 3 </th>
      <th style="width: 15%;">Field 4 </th>
      <th style="width: 15%;">Field 5 </th>
    </tr>
  </thead>
  <tbody class="table-hover">
    <tr>
      <td>Element 1</td>
      <td>Element 2</td>
      <td>Element 3</td>
      <td>Element 4</td>
      <td>Element 5</td>
    </tr>
    <tr>
      <td>Element 1</td>
      <td>Element 2</td>
      <td>Element 3</td>
      <td>Element 4</td>
      <td>Element 5</td>
    </tr>
    <tr>
      <td>Element 1</td>
      <td>Element 2</td>
      <td>Element 3</td>
      <td>Element 4</td>
      <td>Element 5</td>
    </tr>
    <tr>
      <td>Element 1</td>
      <td>Element 2</td>
      <td>Element 3</td>
      <td>Element 4</td>
      <td>Element 5</td>
    </tr>
    <tr>
      <td>Element 1</td>
      <td>Element 2</td>
      <td>Element 3</td>
      <td>Element 4</td>
      <td>Element 5</td>
    </tr>
    <tr>
      <td>Element 1</td>
      <td>Element 2</td>
      <td>Element 3</td>
      <td>Element 4</td>
      <td>Element 5</td>
    </tr>
    <tr>
      <td>Element 1</td>
      <td>Element 2</td>
      <td>Element 3</td>
      <td>Element 4</td>
      <td>Element 5</td>
    </tr>
    <tr>
      <td>Element 1</td>
      <td>Element 2</td>
      <td>Element 3</td>
      <td>Element 4</td>
      <td>Element 5</td>
    </tr>
    <tr>
      <td>Element 1</td>
      <td>Element 2</td>
      <td>Element 3</td>
      <td>Element 4</td>
      <td>Element 5</td>
    </tr>
    <tr>
      <td>Element 1</td>
      <td>Element 2</td>
      <td>Element 3</td>
      <td>Element 4</td>
      <td>Element 5</td>
    </tr>
    <tr>
      <td>Element 1</td>
      <td>Element 2</td>
      <td>Element 3</td>
      <td>Element 4</td>
      <td>Element 5</td>
    </tr>
    <tr>
      <td>Element 1</td>
      <td>Element 2</td>
      <td>Element 3</td>
      <td>Element 4</td>
      <td>Element 5</td>
    </tr>
    <tr>
      <td>Element 1</td>
      <td>Element 2</td>
      <td>Element 3</td>
      <td>Element 4</td>
      <td>Element 5</td>
    </tr>
    <tr>
      <td>Element 1</td>
      <td>Element 2</td>
      <td>Element 3</td>
      <td>Element 4</td>
      <td>Element 5</td>
    </tr>
    <tr>
      <td>Element 1</td>
      <td>Element 2</td>
      <td>Element 3</td>
      <td>Element 4</td>
      <td>Element 5</td>
    </tr>
    <tr>
      <td>Element 1</td>
      <td>Element 2</td>
      <td>Element 3</td>
      <td>Element 4</td>
      <td>Element 5</td>
    </tr>
    <tr>
      <td>Element 1</td>
      <td>Element 2</td>
      <td>Element 3</td>
      <td>Element 4</td>
      <td>Element 5</td>
    </tr>
    <tr>
      <td>Element 1</td>
      <td>Element 2</td>
      <td>Element 3</td>
      <td>Element 4</td>
      <td>Element 5</td>
    </tr>
  </tbody>
</table>

【问题讨论】：

我找不到任何好的纯 CSS 解决方案，所以我可能会将其拆分为两个表，一个用于标题，另一个用于具有相同列宽的其余表。并且可能是下表上overflow-y:scroll; 的包装div。以下是其他一些解决方法：how-to-display-scroll-bar-onto-a-html-table

标签： html css css-tables

【解决方案1】：

这不是一个完美的解决方案，但它确实使表格可滚动。

https://jsfiddle.net/mrg0szzt/2/

html:

<div class="container">
    <div class="sub-container">
        <table class="gestion-table">
            <thead>
            <tr>
                <th style="width: 15%;">Field 1 </th>
                <th style="width: 45%;">Field 2 </th>
                <th style="width: 10%;">Field 3 </th>
                <th style="width: 15%;">Field 4 </th>
                <th style="width: 15%;">Field 5 </th>
            </tr>
            </thead>
            <tbody class="table-hover">
            <tr>
                <td>Element 1</td>
                <td>Element 2</td>
                <td>Element 3</td>
                <td>Element 4</td>
                <td>Element 5</td>
            </tr>
            <tr>
                <td>Element 1</td>
                <td>Element 2</td>
                <td>Element 3</td>
                <td>Element 4</td>
                <td>Element 5</td>
            </tr>
            <tr>
                <td>Element 1</td>
                <td>Element 2</td>
                <td>Element 3</td>
                <td>Element 4</td>
                <td>Element 5</td>
            </tr>
            <tr>
                <td>Element 1</td>
                <td>Element 2</td>
                <td>Element 3</td>
                <td>Element 4</td>
                <td>Element 5</td>
            </tr>
            <tr>
                <td>Element 1</td>
                <td>Element 2</td>
                <td>Element 3</td>
                <td>Element 4</td>
                <td>Element 5</td>
            </tr>
            <tr>
                <td>Element 1</td>
                <td>Element 2</td>
                <td>Element 3</td>
                <td>Element 4</td>
                <td>Element 5</td>
            </tr>       <tr>
                <td>Element 1</td>
                <td>Element 2</td>
                <td>Element 3</td>
                <td>Element 4</td>
                <td>Element 5</td>
            </tr>
            <tr>
                <td>Element 1</td>
                <td>Element 2</td>
                <td>Element 3</td>
                <td>Element 4</td>
                <td>Element 5</td>
            </tr>
            <tr>
                <td>Element 1</td>
                <td>Element 2</td>
                <td>Element 3</td>
                <td>Element 4</td>
                <td>Element 5</td>
            </tr>       <tr>
                <td>Element 1</td>
                <td>Element 2</td>
                <td>Element 3</td>
                <td>Element 4</td>
                <td>Element 5</td>
            </tr>
            <tr>
                <td>Element 1</td>
                <td>Element 2</td>
                <td>Element 3</td>
                <td>Element 4</td>
                <td>Element 5</td>
            </tr>
            <tr>
                <td>Element 1</td>
                <td>Element 2</td>
                <td>Element 3</td>
                <td>Element 4</td>
                <td>Element 5</td>
            </tr>       <tr>
                <td>Element 1</td>
                <td>Element 2</td>
                <td>Element 3</td>
                <td>Element 4</td>
                <td>Element 5</td>
            </tr>
            <tr>
                <td>Element 1</td>
                <td>Element 2</td>
                <td>Element 3</td>
                <td>Element 4</td>
                <td>Element 5</td>
            </tr>
            <tr>
                <td>Element 1</td>
                <td>Element 2</td>
                <td>Element 3</td>
                <td>Element 4</td>
                <td>Element 5</td>
            </tr>       <tr>
                <td>Element 1</td>
                <td>Element 2</td>
                <td>Element 3</td>
                <td>Element 4</td>
                <td>Element 5</td>
            </tr>
            <tr>
                <td>Element 1</td>
                <td>Element 2</td>
                <td>Element 3</td>
                <td>Element 4</td>
                <td>Element 5</td>
            </tr>
            <tr>
                <td>Element 1</td>
                <td>Element 2</td>
                <td>Element 3</td>
                <td>Element 4</td>
                <td>Element 5</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

css:

/* IT's just for the style, please jump to line 44 */
.container{
  display: flex;
  justify-content: center;
}
.sub-container{
  height:192px;
  overflow-y: scroll;
  width: 90%;
}
.gestion-table {
    background: white;
    //margin: auto;
    //width: 90%;
    border-collapse: collapse;
}

.gestion-table th {
    color:#D5DDE5;
    background:#1b1e24;
    font-size: 18px;
    padding:10px;
    vertical-align:middle;
  border-right: 1px solid white;
}

.gestion-table tr {
    color:#666B85;
    font-size:16px;
}

.gestion-table tr:hover td {
    background:#4E5066;
    color:#FFFFFF;
}

.gestion-table tr:nth-child(odd) td {
    background:#EBEBEB;
}

.gestion-table tr:nth-child(odd):hover td {
    background:#4E5066;
}

.gestion-table td {
    background:#FFFFFF;
    padding:10px;
    font-size:16px;
    border-right: 1px solid #C1C3D1;
}

/* HERE STARTS THE PROBLEM */
//Switch between the two display methods on the tbody and see the result
//I'm searching for scrollable tbody with max-height of 150px for example

.gestion-table thead {
    display:table-header-group;
    width: 100%;
}

.gestion-table tbody {
    display:table-row-group;
    //display: block;
    overflow-y: auto;
    width: 100%;
    max-height: 150px;
}

【讨论】：

【解决方案2】：

这可以解决问题，我最终将表格分成两个表格。

您需要考虑的一个问题是滚动未打开的情况，这将在标题表和正文表之间产生差异，您可以添加将 margin-right 我添加到 gestion-table-head 通过数据更改的类长度。或者可能是按页面高度进行的媒体查询。

https://jsfiddle.net/mrg0szzt/6/

html:

<div class="container">
    <table class="gestion-table gestion-table-head ">
        <thead>
        <tr>
            <th style="width: 15%;">Field 1 </th>
            <th style="width: 45%;">Field 2 </th>
            <th style="width: 10%;">Field 3 </th>
            <th style="width: 15%;">Field 4 </th>
            <th style="width: 15%;">Field 5 </th>
        </tr>
        </thead>
    </table>
    <div class="sub-container">
        <table class="gestion-table">
            <tbody class="table-hover">
            <tr>
                <td style="width: 15%;">Element 1</td>
                <td style="width: 45%;">Element 2</td>
                <td style="width: 10%;">Element 3</td>
                <td style="width: 15%;">Element 4</td>
                <td style="width: 15%;">Element 5</td>
            </tr>
            <tr>
                <td>Element 1</td>
                <td>Element 2</td>
                <td>Element 3</td>
                <td>Element 4</td>
                <td>Element 5</td>
            </tr>
            <tr>
                <td>Element 1</td>
                <td>Element 2</td>
                <td>Element 3</td>
                <td>Element 4</td>
                <td>Element 5</td>
            </tr>
            <tr>
                <td>Element 1</td>
                <td>Element 2</td>
                <td>Element 3</td>
                <td>Element 4</td>
                <td>Element 5</td>
            </tr>
            <tr>
                <td>Element 1</td>
                <td>Element 2</td>
                <td>Element 3</td>
                <td>Element 4</td>
                <td>Element 5</td>
            </tr>
            <tr>
                <td>Element 1</td>
                <td>Element 2</td>
                <td>Element 3</td>
                <td>Element 4</td>
                <td>Element 5</td>
            </tr>       <tr>
                <td>Element 1</td>
                <td>Element 2</td>
                <td>Element 3</td>
                <td>Element 4</td>
                <td>Element 5</td>
            </tr>
            <tr>
                <td>Element 1</td>
                <td>Element 2</td>
                <td>Element 3</td>
                <td>Element 4</td>
                <td>Element 5</td>
            </tr>
            <tr>
                <td>Element 1</td>
                <td>Element 2</td>
                <td>Element 3</td>
                <td>Element 4</td>
                <td>Element 5</td>
            </tr>       <tr>
                <td>Element 1</td>
                <td>Element 2</td>
                <td>Element 3</td>
                <td>Element 4</td>
                <td>Element 5</td>
            </tr>
            <tr>
                <td>Element 1</td>
                <td>Element 2</td>
                <td>Element 3</td>
                <td>Element 4</td>
                <td>Element 5</td>
            </tr>
            <tr>
                <td>Element 1</td>
                <td>Element 2</td>
                <td>Element 3</td>
                <td>Element 4</td>
                <td>Element 5</td>
            </tr>       <tr>
                <td>Element 1</td>
                <td>Element 2</td>
                <td>Element 3</td>
                <td>Element 4</td>
                <td>Element 5</td>
            </tr>
            <tr>
                <td>Element 1</td>
                <td>Element 2</td>
                <td>Element 3</td>
                <td>Element 4</td>
                <td>Element 5</td>
            </tr>
            <tr>
                <td>Element 1</td>
                <td>Element 2</td>
                <td>Element 3</td>
                <td>Element 4</td>
                <td>Element 5</td>
            </tr>       <tr>
                <td>Element 1</td>
                <td>Element 2</td>
                <td>Element 3</td>
                <td>Element 4</td>
                <td>Element 5</td>
            </tr>
            <tr>
                <td>Element 1</td>
                <td>Element 2</td>
                <td>Element 3</td>
                <td>Element 4</td>
                <td>Element 5</td>
            </tr>
            <tr>
                <td>Element 1</td>
                <td>Element 2</td>
                <td>Element 3</td>
                <td>Element 4</td>
                <td>Element 5</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

css：

/* IT's just for the style, please jump to line 44 */
.container{
    width: 90%;
    margin: auto;
}
.sub-container{
  height:192px;
  overflow-y: auto;
 // width: 90%;
}
.gestion-table {
    background: white;
    //margin: auto;
    //width: 90%;
    border-collapse: collapse;
}

.gestion-table-head {
  margin-right: 15px;
}

.gestion-table th {
    color:#D5DDE5;
    background:#1b1e24;
    font-size: 18px;
    padding:10px;
    vertical-align:middle;
  border-right: 1px solid white;
}

.gestion-table tr {
    color:#666B85;
    font-size:16px;
}

.gestion-table tr:hover td {
    background:#4E5066;
    color:#FFFFFF;
}

.gestion-table tr:nth-child(odd) td {
    background:#EBEBEB;
}

.gestion-table tr:nth-child(odd):hover td {
    background:#4E5066;
}

.gestion-table td {
    background:#FFFFFF;
    padding:10px;
    font-size:16px;
    border-right: 1px solid #C1C3D1;
}

/* HERE STARTS THE PROBLEM */
//Switch between the two display methods on the tbody and see the result
//I'm searching for scrollable tbody with max-height of 150px for example

.gestion-table thead {
    display:table-header-group;
    width: 100%;
}

.gestion-table tbody {
    display:table-row-group;
    //display: block;
    overflow-y: auto;
    width: 100%;
    max-height: 150px;
}

【讨论】：