如何为具有自定义列宽的可滚动表格固定标题？

为具有自定义列宽的可滚动表格固定标题，可以通过以下步骤实现：

HTML结构：使用HTML表格标签创建表格结构，并为表格添加一个固定的标题行和一个可滚动的内容区域。

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>列1</th>
        <th>列2</th>
        <th>列3</th>
        <!-- 其他列 -->
      </tr>
    </thead>
    <tbody>
      <!-- 表格内容 -->
    </tbody>
  </table>
</div>

CSS样式：使用CSS样式设置表格的样式，并为标题行和内容区域设置相应的样式。

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

table {
  width: 100%;
  border-collapse: collapse;
}

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

thead th {
  position: sticky;
  top: 0;
  background-color: #f5f5f5;
  z-index: 1;
}

JavaScript逻辑：使用JavaScript逻辑计算表格的列宽，并将列宽应用到表格的每一列。

window.addEventListener('DOMContentLoaded', function() {
  var table = document.querySelector('table');
  var ths = table.querySelectorAll('th');
  var tds = table.querySelectorAll('td');

  for (var i = 0; i < ths.length; i++) {
    tds[i].style.width = ths[i].offsetWidth + 'px';
  }
});

以上代码中，通过设置position: sticky;和top: 0;，可以使标题行在滚动时固定在顶部。通过计算每一列的宽度，并将宽度应用到对应的单元格，可以实现自定义列宽。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云对象存储（COS）。