具有固定列的可滚动表，固定大小相等

Question

I have a table with first column fixed so when the next column is scrolled first column item will always display, Now the problem is first column width have fixed value and the same is applying on the margin left, How can we make fluid width instead of fixed width so it resizes based on the column?

 .table-main { border: none; border-right: solid 1px rgb(75, 90, 102); border-collapse: separate; border-spacing: 0; font: normal 13px Arial, sans-serif; } .table-main thead th { background-color: rgb(203, 220, 233); border: none; color: #336B6B; padding: 10px; text-align: left; text-shadow: 1px 1px 1px #fff; white-space: nowrap; } .table-main tbody td { border-bottom: solid 1px rgb(75, 90, 102); color: #333; padding: 10px; text-shadow: 1px 1px 1px #fff; white-space: nowrap; } .table { position: relative; } .table-scroll { margin-left: 131px; /*HOW TO HAVE THIS in Eqaul SIZE??*/ overflow-x: scroll; overflow-y: visible; padding-bottom: 5px; width: 500px; } .table-main .fix-col { border-left: solid 1px rgb(75, 90, 102); border-right: solid 1px rgb(75, 90, 102); left: 0; position: absolute; top: auto; width: 110px; /*HOW TO HAVE THIS in Eqaul SIZE??*/ }

 <div class="table"> <div class="table-scroll"> <table class="table-main"> <thead> <tr> <th class="fix-col">Name</th> <th>Designation</th> <th>Experience</th> <th>Technology</th> <th>Company</th> <th>Location</th> <th>Contact No.</th> <th>Address</th> </tr> </thead> <tbody> <tr> <td class="fix-col">Bob</td> <td>Front End Developer</td> <td>5 yrs</td> <td>HTML,CSS</td> <td>Google</td> <td>California</td> <td>9876543210</td> <td>Google Office</td> </tr> <tr> <td class="fix-col">Bob</td> <td>Front End Developer</td> <td>5 yrs</td> <td>HTML,CSS</td> <td>Google</td> <td>California</td> <td>9876543210</td> <td>Google Office</td> </tr> <tr> <td class="fix-col">Bob</td> <td>Front End Developer</td> <td>5 yrs</td> <td>HTML,CSS</td> <td>Google</td> <td>California</td> <td>9876543210</td> <td>Google Office</td> </tr> <tr> <td class="fix-col">Bob</td> <td>Front End Developer</td> <td>5 yrs</td> <td>HTML,CSS</td> <td>Google</td> <td>California</td> <td>9876543210</td> <td>Google Office</td> </tr> <tr> <td class="fix-col">Bob</td> <td>Front End Developer</td> <td>5 yrs</td> <td>HTML,CSS</td> <td>Google</td> <td>California</td> <td>9876543210</td> <td>Google Office</td> </tr> </tbody> </table> </div> </div>

Answer 1

What about using javascript to calculate and set the width of the fixed column( .fix-col ) and the margin-left of the container div( .table-scroll )?

 var columns = document.querySelectorAll('.fix-col'); var maxWidth = 0; /* Loop through columns to get the widest one */ for (var i = 0; i < columns.length; i++) { /* Get only the width, without any paddings */ var w = parseFloat(window.getComputedStyle(columns[i]).getPropertyValue('width')); if (w > maxWidth) { maxWidth = w; } } /* Second loop to set the width */ for (var i = 0; i < columns.length; i++) { columns[i].style.width = maxWidth + 'px'; } /* And finally update the margin of the wrapping div */ var paddingPlusBorder = 21; document.querySelector('.table-scroll').style.marginLeft = maxWidth + paddingPlusBorder + 'px';

 .table-main { border: none; border-right: solid 1px rgb(75, 90, 102); border-collapse: separate; border-spacing: 0; font: normal 13px Arial, sans-serif; } .table-main thead th { background-color: rgb(203, 220, 233); border: none; color: #336B6B; padding: 10px; text-align: left; text-shadow: 1px 1px 1px #fff; white-space: nowrap; } .table-main tbody td { border-bottom: solid 1px rgb(75, 90, 102); color: #333; padding: 10px; text-shadow: 1px 1px 1px #fff; white-space: nowrap; } .table { position: relative; } .table-scroll { overflow-x: scroll; overflow-y: visible; padding-bottom: 5px; width: 500px; } .table-main .fix-col { border-left: solid 1px rgb(75, 90, 102); border-right: solid 1px rgb(75, 90, 102); left: 0; position: absolute; top: auto; }

 <div class="table"> <div class="table-scroll"> <table class="table-main" id="my-table"> <thead> <tr> <th class="fix-col">Name</th> <th>Designation</th> <th>Experience</th> <th>Technology</th> <th>Company</th> <th>Location</th> <th>Contact No.</th> <th>Address</th> </tr> </thead> <tbody> <tr> <td class="fix-col">Some very long name</td> <td>Front End Developer</td> <td>5 yrs</td> <td>HTML,CSS</td> <td>Google</td> <td>California</td> <td>9876543210</td> <td>Google Office</td> </tr> <tr> <td class="fix-col">LooooooooooongNameeee</td> <td>Front End Developer</td> <td>5 yrs</td> <td>HTML,CSS</td> <td>Google</td> <td>California</td> <td>9876543210</td> <td>Google Office</td> </tr> <tr> <td class="fix-col">Bob</td> <td>Front End Developer</td> <td>5 yrs</td> <td>HTML,CSS</td> <td>Google</td> <td>California</td> <td>9876543210</td> <td>Google Office</td> </tr> </tbody> </table> </div> </div>

And if you want to support older IE versions you can use a custom function to get the column widths instead of using window.getComputedStyle(columns[i]).getPropertyValue('width') .

function getWidth(element) {
  if (getComputedStyle in window) {
    return window.getComputedStyle(element).getPropertyValue('width');
  }

  if (currentStyle in element) {
    return element.currentStyle.width;
  } 

  var defaultWidthIfNoSupport = '100px';
  return defaultWidthIfNoSupport;
}

Answer 2

You could use position: sticky Sticky Element in order to anchor to left the fixed column:

.fix-col {
    position: sticky;
    position: -webkit-sticky;    
    background-color: white; // <-- By default it's transparent
}

<table>
    <tr>
        <th class="fix-col">Name</th>

see the code applied to your snippet:

 .table-main { border: none; border-right: solid 1px rgb(75, 90, 102); border-collapse: separate; border-spacing: 0; font: normal 13px Arial, sans-serif; } .table-main thead th { background-color: rgb(203, 220, 233); border: none; color: #336B6B; padding: 10px; text-align: left; text-shadow: 1px 1px 1px #fff; white-space: nowrap; } .table-main tbody td { border-bottom: solid 1px rgb(75, 90, 102); color: #333; padding: 10px; text-shadow: 1px 1px 1px #fff; white-space: nowrap; } .table-scroll { overflow-x: scroll; width: 500px; } .fix-col { position: sticky; position: -webkit-sticky; background-color: white; left: 0; margin-left: 1em; }

 <div class="table"> <div class="table-scroll"> <table class="table-main"> <thead> <tr> <th class="fix-col">Name</th> <th>Designation</th> <th>Experience</th> <th>Technology</th> <th>Company</th> <th>Location</th> <th>Contact No.</th> <th>Address</th> </tr> </thead> <tbody> <tr> <td class="fix-col">Bob</td> <td>Front End Developer</td> <td>5 yrs</td> <td>HTML,CSS</td> <td>Google</td> <td>California</td> <td>9876543210</td> <td>Google Office</td> </tr> <tr> <td class="fix-col">John</td> <td>Front End Developer</td> <td>5 yrs</td> <td>HTML,CSS</td> <td>Google</td> <td>California</td> <td>9876543210</td> <td>Google Office</td> </tr> <tr> <td class="fix-col">Alessandro</td> <td>Front End Developer</td> <td>5 yrs</td> <td>HTML,CSS</td> <td>Google</td> <td>California</td> <td>9876543210</td> <td>Google Office</td> </tr> <tr> <td class="fix-col">Joseph</td> <td>Front End Developer</td> <td>5 yrs</td> <td>HTML,CSS</td> <td>Google</td> <td>California</td> <td>9876543210</td> <td>Google Office</td> </tr> <tr> <td class="fix-col">Mark</td> <td>Front End Developer</td> <td>5 yrs</td> <td>HTML,CSS</td> <td>Google</td> <td>California</td> <td>9876543210</td> <td>Google Office</td> </tr> </tbody> </table> </div> </div>