0

So far, I have a responsive table that scrolls horizontally if the window is smaller like this jsfiddle. What I need now is the ability to fix the first column, and only have the rest of the columns scroll. All I can get is this. The first column now overlaps for me, and it would be good if I could get it to shift left but for some reason am not able to. Please HELPPPPP. :)

html
Jose Varela
  • 145
  • 3
  • 12
  • 1
    Possible duplicate of [how do I create an HTML table with fixed/frozen left column and scrollable body?](https://stackoverflow.com/questions/1312236/how-do-i-create-an-html-table-with-fixed-frozen-left-column-and-scrollable-body) – Robert May 30 '17 at 05:32

2 Answers2

2

Check this code. I have created a class for fixed columns and gave a padding for second child. Demo

body {
    color: white;
}

.search-table-outter {
    width: auto; 
    max-width: 735px;
    margin-left: 5em;
    margin-right: auto;
    padding-top: 30px;
}
.search-table{
    table-layout: fixed; 
    margin:0px auto 0px auto; 
    background-color: lightblue
}
.search-table, td, th{
    border-collapse:collapse; 
    border-bottom:1px solid white;
    line-height: 10px;
}
th{
    padding:5px 10px; 
    font-size:15px; 
}
td{
    padding:5px 10px; 
    height:35px;
}
.search-table-outter { overflow-x: scroll; }
th, td { min-width: 100px; text-align: center; }

.fixed {
    position: absolute; 
    left: auto; 
    top: auto;
    background-color: lightblue;
    margin: 1px;
}

.search-table tr th:nth-child(2), .search-table tr td:nth-child(2) {
    padding-left: 150px;
}
<div class="container header">
<div class="search-table-outter wrapper">
  <table class="search-table inner">
    <tr>
      <th class="fixed">Time</th>
      <th>Icon</th>
      <th>Description</th>
      <th>Temp</th>
      <th>Precip</th>
      <th>Wind</th>
    </tr>
    <tr>
      <td class="fixed">4:11 </td> 
      <td>Cloud </td>
      <td>Partly Cloudy </td>
      <td>86 </td>
      <td>0% </td>
      <td>8.38 mph </td>
    </tr>
    <tr>
      <td class="fixed">4:11 </td> 
      <td>Cloud </td>
      <td>Partly Cloudy </td>
      <td>86 </td>
      <td>0% </td>
      <td>8.38 mph </td>
    </tr>
    <tr>
      <td class="fixed">4:11 </td> 
      <td>Cloud </td>
      <td>Partly Cloudy </td>
      <td>86 </td>
      <td>0% </td>
      <td>8.38 mph </td>
    </tr>
    <tr>
      <td class="fixed">4:11 </td> 
      <td>Cloud </td>
      <td>Partly Cloudy </td>
      <td>86 </td>
      <td>0% </td>
      <td>8.38 mph </td>
    </tr>
    <tr>
      <td class="fixed">4:11 </td> 
      <td>Cloud </td>
      <td>Partly Cloudy </td>
      <td>86 </td>
      <td>0% </td>
      <td>8.38 mph </td>
    </tr>
    <tr>
      <td class="fixed">4:11 </td> 
      <td>Cloud </td>
      <td>Partly Cloudy </td>
      <td>86 </td>
      <td>0% </td>
      <td>8.38 mph </td>
    </tr>
    <tr>
      <td class="fixed">4:11 </td> 
      <td>Cloud </td>
      <td>Partly Cloudy </td>
      <td>86 </td>
      <td>0% </td>
      <td>8.38 mph </td>
    </tr>
    <tr>
      <td class="fixed">4:11 </td> 
      <td>Cloud </td>
      <td>Partly Cloudy </td>
      <td>86 </td>
      <td>0% </td>
      <td>8.38 mph </td>
    </tr>
  </table>
</div>
</div>
acmsohail
  • 903
  • 10
  • 32
0

may be this is what you looking for

you need to set padding to second td or th

.search-table tr th:nth-child(2), .search-table tr td:nth-child(2) {
    padding-left: 100px;
}


body {
    color: white;
}

.search-table-outter {
    width: auto; 
    max-width: 735px;
    margin-left: 5em;
    margin-right: auto;
    padding-top: 30px;
}
.search-table{
    table-layout: fixed; 
    margin:0px auto 0px auto; 
    background-color: lightblue
}
.search-table, td, th{
    border-collapse:collapse; 
    border-bottom:1px solid white;
    line-height: 10px;
}
th{
    padding:5px 7px; 
    font-size:15px; 
}
td{
    padding:5px 10px; 
    height:35px;
}
.search-table-outter { overflow-x: scroll; }
th, td { min-width: 100px; }

.headcol {
    position: absolute;
    color: black;
    left: auto;
    width: 5em;
    top: auto;
}

.search-table tr th:nth-child(2), .search-table tr td:nth-child(2) {
    padding-left: 100px;
}
<div class="container header">
<div class="search-table-outter wrapper">
  <table class="search-table inner">
    <tr>
      <th class="headcol">Time</th>
      <th>Icon</th>
      <th>Description</th>
      <th>Temp</th>
      <th>Precip</th>
      <th>Wind</th>
    </tr>
    <tr>
      <td class="headcol">4:11 </td> 
      <td>Cloud </td>
      <td>Partly Cloudy </td>
      <td>86 </td>
      <td>0% </td>
      <td>8.38 mph </td>
    </tr>
    <tr>
      <td class="headcol">4:11 </td> 
      <td>Cloud </td>
      <td>Partly Cloudy </td>
      <td>86 </td>
      <td>0% </td>
      <td>8.38 mph </td>
    </tr>
    <tr>
      <td class="headcol">4:11 </td> 
      <td>Cloud </td>
      <td>Partly Cloudy </td>
      <td>86 </td>
      <td>0% </td>
      <td>8.38 mph </td>
    </tr>
    <tr>
      <td class="headcol">4:11 </td> 
      <td>Cloud </td>
      <td>Partly Cloudy </td>
      <td>86 </td>
      <td>0% </td>
      <td>8.38 mph </td>
    </tr>
    <tr>
      <td class="headcol">4:11 </td> 
      <td>Cloud </td>
      <td>Partly Cloudy </td>
      <td>86 </td>
      <td>0% </td>
      <td>8.38 mph </td>
    </tr>
    <tr>
      <td class="headcol">4:11 </td> 
      <td>Cloud </td>
      <td>Partly Cloudy </td>
      <td>86 </td>
      <td>0% </td>
      <td>8.38 mph </td>
    </tr>
    <tr>
      <td class="headcol">4:11 </td> 
      <td>Cloud </td>
      <td>Partly Cloudy </td>
      <td>86 </td>
      <td>0% </td>
      <td>8.38 mph </td>
    </tr>
    <tr>
      <td class="headcol">4:11 </td> 
      <td>Cloud </td>
      <td>Partly Cloudy </td>
      <td>86 </td>
      <td>0% </td>
      <td>8.38 mph </td>
    </tr>
  </table>
</div>
</div>

see fiddle https://jsfiddle.net/s8bczc0L/

Rahul
  • 4,294
  • 1
  • 10
  • 12