Scrollable table with fixed header

前端未结

关注

 2  434

I searched for some solutions in PHP/HTML/CSS for this, but nothing worked so far, maybe because in most of those examples were sooo much of code so I got lost in it. Could

相关标签:

2条回答

春和景丽

2021-01-16 14:36

This code (taken from the link in your comment) is the basic code you need. Next time you need to figure that kind of thing out, just remove segments of code to see what breaks, and leave out everything that doesn't break something that you need.

<html>
<head>
<style>
div.tableContainer {
    clear: both;
    border: 1px solid #963;
    height: 285px; /* html>body tbody.scrollContent height plus 23px for the header */
    overflow: auto;
    width: 756px /* Remember to leave 16px for the scrollbar! */
}

html>body tbody.scrollContent {
    display: block;
    height: 262px;
    overflow: auto;
    width: 100%
}


html>body thead.fixedHeader tr {
    display: block
}

html>body thead.fixedHeader th { /* TH 1 */
    width: 200px
}

html>body thead.fixedHeader th + th { /* TH 2 */
    width: 240px
}

html>body thead.fixedHeader th + th + th { /* TH 3 +16px for scrollbar */
    width: 316px
}

html>body tbody.scrollContent td { /* TD 1 */
    width: 200px
}

html>body thead.scrollContent td + td { /* TD 2 */
    width: 240px
}

html>body thead.scrollContent td + td + td { /* TD 3 +16px for scrollbar */
    width: 316px
}
</style>
</head>
<body>

<div id="tableContainer" class="tableContainer">
<table width="100%" cellspacing="0" cellpadding="0" border="0" class="scrollTable">
    <thead class="fixedHeader">
        <tr class="alternateRow">
            <th><a href="#">Header 1</a></th>
            <th><a href="#">Header 2</a></th>
            <th><a href="#">Header 3</a></th>
        </tr>
    </thead>
    <tbody class="scrollContent">
        <tr class="normalRow">
            <td>Cell Content 1</td>
            <td>Cell Content 2</td>
            <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
            <td>More Cell Content 1</td>
            <td>More Cell Content 2</td>
            <td>More Cell Content 3</td>
        </tr>
        .........
    </tbody>
</table>
</div>
</body>
</html>

0 讨论(0)

小鲜肉

2021-01-16 14:49

Table fixed header using CSS

The simplest would be to position: sticky; your th elements:

.tableFix { /* Scrollable parent element */
  position: relative;
  overflow: auto;
  height: 100px;
}

.tableFix table{
  width: 100%;
  border-collapse: collapse;
}

.tableFix th,
.tableFix td{
  padding: 8px;
  text-align: left;
}

.tableFix thead th {
  position: sticky;  /* Edge, Chrome, FF */
  top: 0px;
  background: #fff;  /* Some background is needed */
}

<div class="tableFix">

  <table>
    <thead>
      <tr><th>H1</th><th>Header 2</th><th>Header 3</th><th>4</th><th>5th Header</th></tr>
    </thead>
    <tbody>
      <tr><td>R1C2</td><td>R1C2</td><td>R1C3</td><td>R1C4</td><td>R1C5</td></tr>
      <tr><td>R2C1</td><td>R2C2</td><td>R2C3</td><td>R2C4</td><td>R2C5</td></tr>
      <tr><td>R3C1</td><td>R3C2</td><td>R3C3</td><td>R3C4</td><td>R3C5</td></tr>
      <tr><td>R4C1</td><td>R4C2</td><td>R4C3</td><td>R4C4</td><td>R4C5</td></tr>
      <tr><td>R5C1</td><td>R5C2</td><td>R5C3</td><td>R5C4</td><td>R5C5</td></tr>
      <tr><td>R6C1</td><td>R6C2</td><td>R6C3</td><td>R6C4</td><td>R6C5</td></tr>
    </tbody>
  </table>

</div>

Table fixed header for older browsers

If the browsers you need to support do not encompass the position's sticky value, you can take a look at Fix table head using a bit of Javascript

0 讨论(0)