2

I try to create beatiful table in html and css. So here is what I have did for the moment : https://jsfiddle.net/mrg0szzt/

As you can see, I have problem :

  • If I put display:block on the tbody I have all data aligned with the first column...

  • If I put display:table-header-group; the overflow-y: auto; stop working...

/* 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>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
Scoop Devek
  • 1,461
  • 2
  • 10
  • 6
  • I couldn't spot any good CSS-only solution, so I would likely split it into two tables, one for header and one for the rest with the same column widths. And possibly a wrapping div for `overflow-y:scroll;` on the lower table. Here are some other various workarounds: [how-to-display-scroll-bar-onto-a-html-table](https://stackoverflow.com/questions/8232713/how-to-display-scroll-bar-onto-a-html-table) – ippi Jun 28 '17 at 16:55

2 Answers2

0

this is not a perfect solution but it dose get the table scrollable.

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;
}
omer
  • 2,435
  • 2
  • 24
  • 28
0

this will do the trick, i ended up splitting the table in to two tables.

an issue that you will need to consider is the case when scroll is not on, this will make a difference between header table and body table, you could add class that change the margin-right i added to gestion-table-head by data length. or maybe a media query by page height.

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;
}
omer
  • 2,435
  • 2
  • 24
  • 28