CSS - 将溢出的表格单元格内容集中在其父级上答案

【问题标题】：CSS - Centre overflowing table cell content on it's parentCSS - 将溢出的表格单元格内容集中在其父级上
【发布时间】：2020-10-29 18:00:54
【问题描述】：

我正在使用 Bootstrap 设计一个网站，并且有一个包含许多列的大表，导致水平溢出。我刚刚添加了行，这些行拉伸了表格的整个宽度，以按月对数据进行分组，中心对齐的 <p> 标记表示月份。但是，由于到目前为止表格在大多数屏幕上都溢出了，因此居中对齐会使文本向右移动，有时甚至超出屏幕。

（你可以看到我的灰色填充的全宽行，文本右移）。

我已经进行了相当多的搜索，并找到了一些使用flex 将<div> 与其父容器居中对齐的解决方案，但我无法在表格中使用它。

有谁知道将我的文本与父容器（例如放置表格的引导卡）居中对齐的方法。我希望它出现在可视显示的中心，这样对用户来说看起来更自然。

任何帮助将不胜感激。

编辑
我应该澄清一下，通过将文本放置在可视屏幕的中间，我希望当用户水平滚动时，文本会保留在屏幕的中间。我可能在这里要求太多了，只是觉得你们中的一些 CSS 专家可能能够为我指明正确的方向。

【问题讨论】：

使用padding-left: 50vw规则怎么样？
@RapSherlock 这是一个好的开始，我希望即使用户水平滚动，文本也可以保持居中对齐引用父容器。我已经编辑了问题以澄清。
你可以用粘性规则来做，等我做一些sn-p

标签： html css twitter-bootstrap center

【解决方案1】：

table {
  border-collapse: collapse;
}

table tbody tr td  {
  border: 1px solid black;
}

.me-alone {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  left: 50vw;
}

<table>
  <tbody>
    <tr>
      <td>tessssssssssssssssss</td>
      <td>tessssssssssssssssss</td>
      <td>tessssssssssssssssss</td>
      <td>tessssssssssssssssss</td>
      <td>tessssssssssssssssss</td>
      <td>tessssssssssssssssss</td>
      <td>tessssssssssssssssss</td>
      <td>tessssssssssssssssss</td>
      <td>tessssssssssssssssss</td>
      <td>tessssssssssssssssss</td>
    </tr>
    <tr>
      <td colspan="10" style="background-color: lightgray;">
        <span class="me-alone">Some Text</span>
       </td>
    </tr>
    <tr>
      <td>tessssssssssssssssss</td>
      <td>tessssssssssssssssss</td>
      <td>tessssssssssssssssss</td>
      <td>tessssssssssssssssss</td>
      <td>tessssssssssssssssss</td>
      <td>tessssssssssssssssss</td>
      <td>tessssssssssssssssss</td>
      <td>tessssssssssssssssss</td>
      <td>tessssssssssssssssss</td>
      <td>tessssssssssssssssss</td>
    </tr>
  </tbody>
</table>

【讨论】：