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

时间：2019-04-03 11:49:40

标签： javascript html css

我有一个表格，其中第一列固定，因此当滚动下一列时，第一列项目将始终显示，现在的问题是第一列宽度具有固定值，并且在左边距上也是如此，我们如何使流体宽度而不是固定宽度，以便根据列调整大小？

Align(
  alignment: Alignment.centerRight,
  child: //here your list,
)

.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??*/
        }

2 个答案:

答案 0 :(得分：1)

使用JavaScript计算并设置固定列（.fix-col）的宽度和容器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>

如果要支持旧版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;
}

答案 1 :(得分：0)

您可以使用position: sticky Sticky Element来锚定固定列：

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

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

查看适用于您的代码段的代码：

.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>

相关问题
最新问题