如何使用jQuery实现HTML表格超出可视范围的多余列自动隐藏？

以下是完整可直接运行的代码，在你原有代码基础上修改即可：

HTML部分 #

<!-- 请先在项目中引入jQuery依赖 -->
<div class="table-wrapper">
  <button class="scroll-btn scroll-left" disabled>←</button>
  <div class="table-container">
    <table>
      <tr>
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
      </tr>
      <tr>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
      </tr>
      <tr>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
      </tr>
      <tr>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
      </tr>
    </table>
  </div>
  <button class="scroll-btn scroll-right">→</button>
</div>

CSS部分 #

/* 原有样式调整 */
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: max-content;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
  min-width: 150px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

/* 新增样式 */
.table-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.table-container {
  overflow: hidden;
  flex: 1;
}

.scroll-btn {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: #eee;
  cursor: pointer;
  flex-shrink: 0;
}

.scroll-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

jQuery逻辑部分 #

$(function() {
  const $container = $('.table-container');
  const $table = $('table');
  const $leftBtn = $('.scroll-left');
  const $rightBtn = $('.scroll-right');
  // 每次滚动列数，可根据需求调整
  const scrollColCount = 3;
  const colWidth = $('th:first').outerWidth();
  const scrollStep = scrollColCount * colWidth;
  let currentOffset = 0;
  let maxOffset = $table.outerWidth() - $container.width();

  $rightBtn.on('click', function() {
    currentOffset += scrollStep;
    if (currentOffset >= maxOffset) {
      currentOffset = maxOffset;
      $rightBtn.prop('disabled', true);
    }
    $leftBtn.prop('disabled', false);
    $table.css('transform', `translateX(-${currentOffset}px)`);
  })

  $leftBtn.on('click', function() {
    currentOffset -= scrollStep;
    if (currentOffset <= 0) {
      currentOffset = 0;
      $leftBtn.prop('disabled', true);
    }
    $rightBtn.prop('disabled', false);
    $table.css('transform', `translateX(-${currentOffset}px)`);
  })

  $(window).on('resize', function() {
    maxOffset = $table.outerWidth() - $container.width();
    if (currentOffset > maxOffset) {
      currentOffset = maxOffset;
      $table.css('transform', `translateX(-${currentOffset}px)`);
      $rightBtn.prop('disabled', true);
    }
  })
})

参数调整说明 #

• 修改scrollColCount参数可以调整每次点击切换的列数
• 修改th/td的min-width值可以调整每列的默认宽度

内容的提问来源于stack exchange，提问作者CoreTM