javascript - 具有固定列的可滚动表，固定大小相同

Question

我有一个第一列固定的表格，所以当下一列滚动时，第一列元素将始终显示，现在问题是第一列宽度具有固定值，同样适用于左边距，我们如何才能使流畅宽度而不是固定宽度，因此它会根据列调整大小？

.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

用javascript计算和设置固定列的宽度(.fix-col)和容器div的margin-left(.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>

如果您想支持旧的 IE 版本，您可以使用自定义函数来获取列宽，而不是使用 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;
}