可滚动表格，使用CSS锁定第一列，Joomla

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>列1</th>
        <th>列2</th>
        <th>列3</th>
        <!-- 更多列... -->
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>数据1</td>
        <td>数据2</td>
        <td>数据3</td>
        <!-- 更多数据... -->
      </tr>
      <!-- 更多行... -->
    </tbody>
  </table>
</div>

.table-container {
  width: 100%;
  overflow-x: auto;
}

th:first-child,
td:first-child {
  position: sticky;
  left: 0;
  background-color: #fff;
}

// 如果表格内容高度超过容器高度，可以添加以下代码以确保表头和第一列在滚动时保持对齐
var tableContainer = document.querySelector('.table-container');
tableContainer.addEventListener('scroll', function() {
  var tableHeader = document.querySelector('thead');
  tableHeader.style.transform = 'translateY(' + tableContainer.scrollTop + 'px)';
  
  var firstColumn = document.querySelectorAll('td:first-child');
  for (var i = 0; i < firstColumn.length; i++) {
    firstColumn[i].style.transform = 'translateX(' + tableContainer.scrollLeft + 'px)';
  }
});