CODEWITHSUNDEEP
csshtml-tablecss-position
fablexis
fablexis

Reputation: 578

Two fixed columns when scrolling a table

I have the following code:

table {
  table-layout: fixed; 
  width: 100%;
  *margin-left: -100px;/*ie7*/
}
td, th {
  vertical-align: top;
  border-top: 1px solid #ccc;
  padding:10px;
  width:100px;
}
th {
/*  position:absolute;
  *position: relative; /*ie7*/
/*  left:0; */
  width:100px;
}
.hard_left {
  position:absolute;
  *position: relative; /*ie7*/
  left:0; 
  width:100px;
}
.next_left {
  position:absolute;
  *position: relative; /*ie7*/
  left:100px; 
  width:100px;
}
.outer {position:relative}
.inner {
  overflow-x:scroll;
  overflow-y:visible;
  width:400px; 
  margin-left:200px;
}
<div class="outer">
  <div class="inner">
    <table>
        <tr>
          <th class="hard_left">Header A</th>
          <th class="next_left">Header B</th>
          <th>Header C</th>
          <th>Header D</th>
          <th>Header E</th>
          <th>Header A</th>
          <th>Header B</th>
          <th>Header C</th>
          <th>Header D</th>
          <th>Header E</th>
        </tr>
        <tr>
          <td class="hard_left">col 1 - A</td>
          <td class="next_left">col 2 - A Lorem ipsum dolor sit amet consectetur adipiscing elit dignissim tristique, mollis platea aenean netus sociosqu erat ornare fusce, habitasse bibendum euismod rutrum vivamus arcu scelerisque varius. Nascetur convallis porta semper dui cum ut lacinia, placerat hendrerit tempor mattis at risus quis et</td>
          <td>col 3 - A</td>
          <td>col 4 - A</td>
          <td>col 5 - A</td>
          <td>col 1 - A</td>
          <td>col 2 - A</td>
          <td>col 3 - A</td>
          <td>col 4 - A</td>
          <td>col 5 - A</td>
        </tr>
        <tr>
          
          <td class="hard_left">col 1 - B</td>
          <td class="next_left">col 2 - B</td>
          <td>col 3 - B</td>
          <td>col 4 - B</td>
          <td>col 5 - B</td>
          <td>col 1 - A</td>
          <td>col 2 - A</td>
          <td>col 3 - A</td>
          <td>col 4 - A</td>
          <td>col 5 - A</td>
        </tr>
        <tr>
          
          <td class="hard_left">col 1 - C</td>
          <td class="next_left">col 2 - C</td>
          <td>col 3 - C</td>
          <td>col 4 - C</td>
          <td>col 5 - C</td>
          <td>col 1 - A</td>
          <td>col 2 - A</td>
          <td>col 3 - A</td>
          <td>col 4 - A</td>
          <td>col 5 - A</td>
        </tr>
        <tr>
          <td class="hard_left">col 1 - A</td>
          <td class="next_left">col 2 - A</td>
          <td>col 3 - A</td>
          <td>col 4 - A</td>
          <td>col 5 - A</td>
          <td>col 1 - B</td>
          <td>col 2 - B</td>
          <td>col 3 - B</td>
          <td>col 4 - B</td>
          <td>col 5 - B</td>
        </tr>
        <tr>
          <td class="hard_left">col 1 - A</td>
          <td class="next_left">col 2 - A</td>
          <td>col 3 - A</td>
          <td>col 4 - A</td>
          <td>col 5 - A</td>
          <td>col 1 - C</td>
          <td>col 2 - C</td>
          <td>col 3 - C</td>
          <td>col 4 - C</td>
          <td>col 5 - C</td>
        </tr>
        <tr>
          <td class="hard_left">col 1 - A</td>
          <td class="next_left">col 2 - A</td>
          <td>col 3 - A</td>
          <td>col 4 - A</td>
          <td>col 5 - A</td>
          <td>col 1 - B</td>
          <td>col 2 - B</td>
          <td>col 3 - B</td>
          <td>col 4 - B</td>
          <td>col 5 - B</td>
        </tr>
        <tr>
          <td class="hard_left">col 1 - A</td>
          <td class="next_left">col 2 - A</td>
          <td>col 3 - A</td>
          <td>col 4 - A</td>
          <td>col 5 - A</td>
          <td>col 1 - C</td>
          <td>col 2 - C</td>
          <td>col 3 - C</td>
          <td>col 4 - C</td>
          <td>col 5 - C</td>
        </tr>
    </table>
  </div>
</div>

What I need to do is to be able to adapt the height of each row in the right side of the table (the one that is not fixed) with the ones at the left (those ones that are fixed).

Currently, if I add a lot of content to one of the columns that are fixed, the container column does not increase its height and it loses the height match with the closest column at the right.

Upvotes: 1

Views: 75

Answers (1)

pg316
pg316

Reputation: 1388

The main issue here is that setting your first columns to absolute take them out of the flow of the page so it will be difficult to use css to mirror the height. With a little bit of jquery though you can grab a specific cell height and mirror that to all the other cells on the same row. For instance:

$(document).ready(function() {
  //Find the cell with the height you want to mirror
  $("table .next_left").each(function() {
      //Propogate the desired height to all the other cells on the current row
      $(this).closest("tr").find("td").height($(this).height())
  })
})

When is your content loaded? This is not a dynamic solution and will only mirror the heights on first load. If your content changes dynamically you will have to re-run this fix or setup a listener for when the data changes and make it happen automatically.

Upvotes: 1

Related Questions