如何将表格中的文本居中，因此它始终位于屏幕可见区域的中心

Question

请有人帮我完成这项任务。我想将文本放在表格行中（'Some text here ...'），以便它始终位于屏幕可见区域的中间。该表将具有水平滚动。

.compare-content {
  max-width: 480px;
  overflow-x: auto;
}
.compare-content table {
  width: 100%;
  text-align: center;
  font-size: 12px;
}
.compare-content table caption {
  font-size: 14px;
  line-height: 39px;
  border-top: 1px solid #CECECE;
  border-bottom: 1px solid #CECECE;
}
.compare-content table tr {
  line-height: 25px;
}
.compare-content table td {
  padding: 0 10px;
  min-width: 145px;
}
.compare-content tr:nth-child(odd) {
  background-color: #F4F4F4;
  color: #898989;
}

<div class="compare-content">
  <table class="total">
    <caption>Summary</caption>
    <tr>
      <td colspan="100%">Some text here...</td>
    </tr>
    <tr>
      <td></td>
      <td>text1</td>
      <td>text2</td>
      <td>text3</td>
    </tr>
    <tr>
      <td colspan="100%">Some text here...</td>
    </tr>
    <tr>
      <td></td>
      <td>text4</td>
      <td>text5</td>
      <td>text6</td>
    </tr>
    <tr>
      <td colspan="100%">Some text here...</td>
    </tr>
    <tr>
      <td></td>
      <td>text7</td>
      <td>text8</td>
      <td>text9</td>
    </tr>
    <tr>
      <td colspan="100%">Some text here...</td>
    </tr>
    <tr>
      <td></td>
      <td>text10</td>
      <td>text11</td>
      <td>text12</td>
    </tr>
  </table>
  <div>

Answer 1

所以我可以建议你的例子，我为你准备小提琴 - https://jsfiddle.net/skyr9999/vuxzfvnu/

只要您没有垂直滚动表，它就可以工作，但如果你不这样做，那么一切都运行得很好：

这里的CSS和HTML：

＆＃13;

＆＃13;

.compare-content {
  max-width: 480px;
  overflow-x: auto;
}
.compare-content table {
  width: 100%;
  text-align: center;
  font-size: 12px;
}
.compare-content table caption {
  font-size: 14px;
  line-height: 39px;
  border-top: 1px solid #CECECE;
  border-bottom: 1px solid #CECECE;
}
.compare-content table tr {
  line-height: 25px;
}
.compare-content table td {
  padding: 0 10px;
  min-width: 145px;
}
.compare-content tr:nth-child(odd) {
  background-color: #F4F4F4;
  color: #898989;
}

.total tr td
{
  border : 0px #000 solid;
}

.fix {
  position: absolute;
  width: 455px;
  left: 10px;
  border : 0px #000 solid;
}

＆＃13;

<div class="compare-content">
  <table class="total">
    <caption>Summary</caption>
    <tr>
      <td colspan="100%">&nbsp;</td>
      <td colspan="100%" class="fix">Some text here.. 1.</td>
    </tr>
    <tr>
      <td></td>
      <td>text1</td>
      <td>text2</td>
      <td>text3</td>
    </tr>
    <tr>
      <td colspan="100%">&nbsp;</td>
      <td colspan="100%" class="fix">Some text here.. 2.</td>
    </tr>
    <tr>
      <td></td>
      <td>text4</td>
      <td>text5</td>
      <td>text6</td>
    </tr>
    <tr>
      <td colspan="100%">&nbsp;</td>
      <td colspan="100%" class="fix">Some text here.. 3.</td>
    </tr>
    <tr>
      <td></td>
      <td>text7</td>
      <td>text8</td>
      <td>text9</td>
    </tr>
    <tr>
      <td colspan="100%">&nbsp;</td>
      <td colspan="100%" class="fix">Some text here.. 4.</td>
    </tr>
    <tr>
      <td></td>
      <td>text10</td>
      <td>text11</td>
      <td>text12</td>
    </tr>
  </table>
  <div>

＆＃13;

＆＃13;

＆＃13;