HTML table with horizontal scrolling (first column fixed)

user_380213 0
Viewed 227122

I have been trying to think of a way to make a table with a fixed first column (and the rest of the table with a horizontal overflow) I saw a post which had a similar question. but the fixed column bit did not seem to be resolved. Help?

fixed html-table overflow html
7 Answers

You can use below table style to have horizontal scrolling table with fixed first column.

<style type="text/css">
    table, th, td {
        border: 1px solid black;
    }    
    .table-style {
        overflow-x: auto;
    }
    .table-style tr th:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        background-color: white;
    }
</style>

<div class="table-style">
<table>
    <thead>
        <tr>
            <th>_col1_row1_</th>
            <th>_col2_row1_</th>
            <th>_col3_row1_</th>
            <th>_col4_row1_</th>
            <th>_col5_row1_</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>_col1_row2_</th>
            <td>_col2_row2_</td>
            <td>_col3_row2_</td>
            <td>_col4_row2_</td>
            <td>_col5_row2_</td>
        </tr>
        <tr>
            <th>_col1_row3_</th>
            <td>_col2_row3_</td>
            <td>_col3_row3_</td>
            <td>_col4_row3_</td>
            <td>_col5_row3_</td>
        </tr>
        <tr>
            <th>_col1_row4_</th>
            <td>_col2_row4_</td>
            <td>_col3_row4_</td>
            <td>_col4_row4_</td>
            <td>_col5_row4_</td>
        </tr>
        <tr>
            <th>_col1_row5_</th>
            <td>_col2_row5_</td>
            <td>_col3_row5_</td>
            <td>_col4_row5_</td>
            <td>_col5_row5_</td>
        </tr>
    </tbody>
</table>
user_54842300

Take a look at this JQuery plugin:

http://fixedheadertable.com

It adds vertical (fixed header row) or horizontal (fixed first column) scrolling to an existing HTML table. There is a demo you can check for both cases of scrolling.

user_1257130

Here's an example with fixed first and last columns. Sticky works better than absolute positioning for expanding the rows when the cells have more content.

Note - this also works with rowspan table cells. The table holds its correct shape.

.wrapper {
  overflow-x:scroll;
  width:100%; 
}
table {
  table-layout: fixed; 
  width: 100%;
  border-collapse: collapse;
  background: white;
}
tr {
  border-top: 1px solid #ccc;
}
td, th {
  vertical-align: top;
  text-align: left;
  width:150px;
  padding: 5px;
}
.fix {
  position:sticky;
  background: white;
}
.fix:first-child {
  left:0;
  width:180px;
}
.fix:last-child {
  right:0;
  width:120px;
}
  <div class="wrapper">
    <table>
      <thead>
        <th class='fix'>Fixed</th>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
        <th>Col 4</th>
        <th>Col 5</th>
        <th class='fix'>Fixed</th>
      </thead>
      <tbody>
        <tr>
          <td class='fix'>First Content</td>
          <td>A1</td>
          <td>A2 (with longer content)</td>
          <td>A3</td>
          <td>A4</td>
          <td>A5</td>
          <td class='fix'>Last Content</td>
        </tr>
        <tr>
          <td class='fix'>First Content (with longer content)</td>
          <td>B1</td>
          <td>B2</td>
          <td>B3</td>
          <td>B4</td>
          <td>B5</td>
          <td class='fix'>Last Content</td>
        </tr>
        <tr>
          <td class='fix'>First Content</td>
          <td>C1</td>
          <td>C2</td>
          <td>C3</td>
          <td>C4</td>
          <td>C5</td>
          <td class='fix'>Last Content (with longer content)</td>
        </tr>
      </tbody>
    </table>
  </div>

Example to play with: https://jsbin.com/qawidijigi/edit?html,css,output

user_1774890
Related