Html table with fixed first column

Question

I'm searching for 3 days to find a solution in all forums but unfortunately, nothing found. I can't find how to make the first column (not the first row) in an HTML table fixed when I resize my screen and make a scroll bar for the rest: column2, column3, column4... ONLY WITH CSS and NO JavaScript OR JQuery

check this `fiddle` http://jsfiddle.net/emn13/YMvk9/ – kAy_4337270 Jun 10 '15 at 11:23 — kAy_4337270, Jun 10 '15 at 11:23
Is that what you are searching for ??? – kAy_4337270 Jun 10 '15 at 11:26 — kAy_4337270, Jun 10 '15 at 11:26

score 1 · Answer 1 · answered Jul 02 '21 at 16:45

First column or first row can easily be made by using the position: sticky css attribute.

.limited-area {
  width: 200px;
  height: 100px;
  border: 1px solid red;
  overflow-x: auto;
  white-space:nowrap;
}

.col-fixed {
  position: sticky;
  left: 0px;
  background-color: red;
}

.col-number {
  min-width: 150px;
  text-align: center;
}

.col-text {
  min-width: 250px;
  text-align: left;
}

<div class="limited-area">
  <table>
    <thead>
      <tr>
        <th class="col-fixed">idx</th>
        <th class="col-number">id</th>
        <th class="col-text">type</th>
      </tr>
    </thead>
      <tbody>
        <tr>
          <td class="col-fixed">0</td>
          <td class="col-number">1</td>
          <td class="col-text">Some content here that may force the screen to be scrollable</td>
        </tr>
        <tr>
          <td class="col-fixed">1</td>
          <td class="col-number">77</td>
          <td class="col-text">Another content here that may force the screen to be scrollable</td>
        </tr>
        <tr>
          <td class="col-fixed">2</td>
          <td class="col-number">99</td>
          <td class="col-text">Small content</td>
        </tr>
        <tr>
          <td class="col-fixed">3</td>
          <td class="col-number">123</td>
          <td class="col-text">All the content</td>
        </tr>
    </tbody>
  </table>
</div>

score 0 · Answer 2 · answered Jun 10 '15 at 11:34

Try out position: fixed and use padding/margin to position the second td :)

/*just for better display*/
td{
  color: red;
}

.first{
  position: fixed;
  color: green;
}

.second{
  padding-left: 25px;
  color: blue;
}

<html>
  
  <table>
    
    <tr>
      <td class="first">abc</td>
       <td class="second">def</td>
      <td>ghi</td>
    </tr>
    <tr>
       <td class="first">abc</td>
       <td class="second">def</td>
      <td>ghi</td>
    </tr>
    <tr>
       <td class="first">abc</td>
       <td class="second">def</td>
      <td>ghi</td>
    </tr>
  </table>
  
</html>

score 0 · Answer 3 · edited Aug 15 '20 at 09:38

    /* above this is decorative, not part of the test */
    
    .fixed-table-container {
      width: 100%;
      height: 200px;
      border: 1px solid black;
      margin: 10px auto;
      background-color: white;
      /* above is decorative or flexible */
      position: relative; /* could be absolute or relative */
      padding-top: 30px; /* height of header */
    }

    .fixed-table-container-inner {
      overflow-x: hidden;
      overflow-y: auto;
      height: 100%;
    }
     
    .header-background {
      background-color: #D5ECFF;
      height: 30px; /* height of header */
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
    }
    
    table {
      background-color: white;
      width: 100%;
      overflow-x: hidden;
      overflow-y: auto;
    }

    .th-inner {
      position: absolute;
      top: 0;
      line-height: 30px; /* height of header */
      text-align: left;
      border-left: 1px solid black;
      padding-left: 5px;
      margin-left: -5px;
    }
    .first .th-inner {
        border-left: none;
        padding-left: 6px;
      }

    <div class="fixed-table-container">
      <div class="header-background"> </div>
      <div class="fixed-table-container-inner">
        <table cellspacing="0">
          <thead>
            <tr>
              <th class="first">
                <div class="th-inner">First</div>
              </th>
              <th class="second">
                <div class="th-inner">Second</div>
              </th>
              <th class="third">
                <div class="th-inner">Third</div>
              </th>
              <th class="third">
                <div class="th-inner">Third</div>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>First</td>
              <td>First</td>

              <td>First</td>
              <td>First</td>
            </tr>
            <tr>
              <td>First</td>
              <td>First</td>

              <td>First</td>
              <td>First</td>
            </tr>
            <tr>
              <td>First</td>
              <td>First</td>

              <td>First</td>
              <td>First</td>
            </tr>
            <tr>
              <td>First</td>
              <td>First</td>

              <td>First</td>
              <td>First</td>
            </tr>
            <tr>
              <td>First</td>
              <td>First</td>

              <td>First</td>
              <td>First</td>
            </tr>
            <tr>
              <td>First</td>
              <td>First</td>

              <td>First</td>
              <td>First</td>
            </tr>
            <tr>
              <td>First</td>
              <td>First</td>

              <td>First</td>
              <td>First</td>
            </tr>
            <tr>
              <td>First</td>
              <td>First</td>

              <td>First</td>
              <td>First</td>
            </tr>
            <tr>
              <td>First</td>
              <td>First</td>

              <td>First</td>
              <td>First</td>
            </tr>
            <tr>
              <td>First</td>
              <td>First</td>

              <td>First</td>
              <td>First</td>
            </tr>
            <tr>
              <td>tesft</td>
              <td>dddd</td>
              <td>dd</td>
              <td>dd</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

Please check this with responsive support

Not useful because i said in my question "to make the first column (not the first row)" — Codinga, Jun 10 '15 at 13:34

Html table with fixed first column

3 Answers3

Linked