如何调整这个固定的表格标题，使其左对齐而不是居中？

Posted 2023-03-05

【中文标题】如何调整这个固定的表格标题，使其左对齐而不是居中？

【英文标题】：How can I adjust this fixed table header so it is left aligned instead of centred?

【发布时间】：2019-04-09 04:32:56

【问题描述】：

所以当我滚动时，表格标题是固定的，但它向左对齐而不是居中 - 我不确定在哪里居中。我已经尝试过 CSS 并在 jquery 中没有成功...

我有一个全角示例在这里工作... https://jsfiddle.net/vladi/vuoe35n7/

现在我想将表格的宽度更改为 660 像素并将其居中。

我将表格的 css 从 98% 更改为 660px，并将边距从 margin: 0 1% 更改为 margin: 0 auto

https://jsfiddle.net/rbla/m605k9ov

似乎无法让克隆的标题正确排列？

  table 
      border-collapse:collapse;
      /* width: 98%; */
      /* margin: 0 1%; */
      width: 660px;
      margin: 0 auto;
  

关于如何使这个固定的表格标题居中以使其与原始表格相匹配的任何想法？我想知道它是否在jquery中

【问题讨论】：

为什么不用jQuery克隆左边的位置？

添加 right: 0; left: 0; 到你的 .fixed 类

CSS horizontal centering of a fixed div?的可能重复

【参考方案1】：

您可以为此here 找到另一个解决方案。查看以“这里的答案已过时”开头的答案，包括以下方法：

left: 50%;
transform: translateX(-50%);

“左：0，右：0”方法似乎工作得很好，但我认为这种转换更明显地试图使内容居中，而使用“左：0，右：0”方法我有尝试让它确信它不会强迫它达到 100% 宽度。

【参考方案2】：

固定的标题元素是固定的（呃！）所以margin: auto 技巧将不起作用。但是，解决方案很简单：将 left: 0 和 right: 0 添加到 fixed 类中，它将使内容居中，如下所示：

.fixed 
  top:0;
  position:fixed;
  left: 0;
  right: 0;
  display:none;
  border-top:none;
  border-bottom:none;

如您所见，您也可以直接使用 width: 660px，因为它总是会被 javascript 覆盖。

【讨论】：

何塞 - 你的解决方案有效 - 谢谢 - 但我认为 Ryan 的答案更直观，可能更合适。