将表格主体显示为可滚动

时间：2017-06-28 16:25:58

标签： html css css-tables

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

2 个答案:

答案 0 :(得分：0)

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

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

答案 1 :(得分：0)

这将解决问题，我最终将表格拆分为两个表格。

您需要考虑的问题是滚动未打开时的情况，这将使标头表和正文表之间产生差异，您可以添加更改margin-right我添加到{{1}的类按数据长度。或者页面高度的媒体查询。

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

HTML：

gestion-table-head

css：

<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>
相关问题
最新问题