html - 将表体显示为可滚动

我尝试在 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>

最佳答案

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

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

关于html - 将表体显示为可滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44807970/

html - 将表体显示为可滚动

上一篇：javascript - JQUERY 仅展开选定的父列表

下一篇：javascript - 每个旁边都有一个 Div，但有一个出现在页面之外