利用纯css实现table固定列与表头中间横向滚动的思路和实例

下面我来详细讲解“利用纯CSS实现table固定列与表头中间横向滚动”的思路和实现步骤。

思路

要实现表头和固定列的横向滚动，需要将表格分为三部分：左侧固定列、中间表头、右侧内容。而为了保证左侧固定列的位置不会改变，需要给该列添加固定的宽度。

在滚动时，需要通过对表头和右侧内容的scroll事件进行监听，来同步滚动位置，保证左侧固定列的位置不变。

实现步骤

我们将表格分为三部分：左侧固定列、中间表头、右侧内容，使用HTML的table标签来布局，并用CSS来设置宽度和固定列。

HTML代码

<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
      <th>Column 6</th>
      <th>Column 7</th>
      <th>Column 8</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="fixed-column">Data 1-1</td>
      <td>Data 1-2</td>
      <td>Data 1-3</td>
      <td>Data 1-4</td>
      <td>Data 1-5</td>
      <td>Data 1-6</td>
      <td>Data 1-7</td>
      <td>Data 1-8</td>
    </tr>
    <tr>
      <td class="fixed-column">Data 2-1</td>
      <td>Data 2-2</td>
      <td>Data 2-3</td>
      <td>Data 2-4</td>
      <td>Data 2-5</td>
      <td>Data 2-6</td>
      <td>Data 2-7</td>
      <td>Data 2-8</td>
    </tr>
      .
      .
      .
  </tbody>
</table>

CSS代码

首先，我们需要设置表格的布局和样式，包括边框、宽度、位置等。

table {
  border-collapse: collapse;
  width: 100%;
  margin-top: 20px;
}

th, td {
  border: 1px solid #ccc;
  padding: 8px;
}

thead th {
  background-color: #f5f5f5;
}

.fixed-column {
  background-color: #f9f9f9;
  position: sticky;
  left: 0;
  z-index: 1;
  width: 100px; /* 固定列的宽度 */
}

接下来，我们需要对表头和右侧内容进行横向滚动的设置。通常情况下，右侧内容会比较宽，如果直接给tbody设置滚动条，那么左侧固定列会跟着滚动，这时可以给内容部分添加一个外部容器，并给容器设置横向滚动条。

tbody {
  display: block;
  overflow: auto;
  width: 100%;
  height: 300px;
}

tbody tr {
  display: table-row;
}

tbody td {
  display: table-cell;
  white-space: nowrap;
}

.outer-container {
  overflow-x: scroll;
}

最后，我们需要对表头和右侧内容进行联动滚动的实现。我们可以通过监听tbody和thead的scroll事件，来同步它们的滚动位置。

var tbody = document.querySelector('tbody');
var thead = document.querySelector('thead');
thead.addEventListener('scroll', function(e) {
  tbody.scrollLeft = this.scrollLeft;
});

tbody.addEventListener('scroll', function(e) {
  thead.scrollLeft = this.scrollLeft;
});

示例说明

我们用实例来说明一下上述代码的具体效果和实现。

示例一

首先，我们需要将表格的HTML代码和CSS代码添加到HTML文件和CSS文件中（这里就不贴了）。

然后，通过JavaScript代码来监听表头和右侧内容的滚动事件。

var tbody = document.querySelector('tbody');
var thead = document.querySelector('thead');
thead.addEventListener('scroll', function(e) {
  tbody.scrollLeft = this.scrollLeft;
});

tbody.addEventListener('scroll', function(e) {
  thead.scrollLeft = this.scrollLeft;
});

以上代码可以同步表头和右侧内容的滚动位置。

示例二

接下来，我们可以通过ajax获取后台数据并渲染到表格中。

var tbody = document.querySelector('tbody');
var thead = document.querySelector('thead');

// 获取数据，并将其渲染到表格中
function renderTable(data) {
  var html = '';
  for (var i = 0; i < data.length; i++) {
    html += '<tr>';
    html += '<td class="fixed-column">' + data[i].column1 + '</td>';
    html += '<td>' + data[i].column2 + '</td>';
    html += '<td>' + data[i].column3 + '</td>';
    html += '<td>' + data[i].column4 + '</td>';
    html += '<td>' + data[i].column5 + '</td>';
    html += '<td>' + data[i].column6 + '</td>';
    html += '<td>' + data[i].column7 + '</td>';
    html += '<td>' + data[i].column8 + '</td>';
    html += '</tr>';
  }
  tbody.innerHTML = html;
}

// 发送ajax请求
var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data');
xhr.onload = function() {
  if (xhr.status === 200) {
    var data = JSON.parse(xhr.responseText);
    renderTable(data);
    // 监听表头和内容的滚动事件
    thead.addEventListener('scroll', function(e) {
      tbody.scrollLeft = this.scrollLeft;
    });

    tbody.addEventListener('scroll', function(e) {
      thead.scrollLeft = this.scrollLeft;
    });
  }
};
xhr.send();

以上代码可以实现通过ajax获取数据并渲染到表格中，并且同步表头和内容的滚动位置。