在不更改现有 CSS 属性的情况下使表格水平滚动答案

【问题标题】：Making a table horizontally scrollable without changing the existing CSS properties在不更改现有 CSS 属性的情况下使表格水平滚动
【发布时间】：2017-11-27 00:54:13
【问题描述】：

请帮助我在不更改现有 CSS 属性的情况下使此表格水平滚动。现有的 CSS 正在将行更改为列，我只想保持这种方式。

<style>

tr{

display:block;
float:left;
}
td,th{
display: block;
   border: 1px solid #ddd;
   clear:both
}


</style>
<body>

<div class="container">
  <h2>Bordered Table</h2>
  <p>The .table-bordered class adds borders to a table:</p>            
  <table class="table table-bordered">
     <tbody>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>


      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr><tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr><tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr><tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr><tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr><tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr><tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr><tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr><tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr><tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>

    </tbody>
  </table>
</div>

</body>

【问题讨论】：

可以添加css属性吗？
您正在使用的 CSS 完全破坏表格。请说明你为什么这样做！如果你想要一个可滚动的表格，你应该把它放入一个可滚动的<div>，但你不应该改变表格元素的display。
嗨，Aloso，我写了那个 css，因为我是交替行和列的。运行代码一次，你就可以理解了。
@pistou css 已经存在。
我想请求人们不要仅仅因为他们无法理解我的情况而对此投反对票。我认为这非常有用，如果其他人想要交替显示行和列，他们可能会从中获得一些帮助。我还发现了我只从其中一个问题中写的 css

标签： html html-table rows horizontal-scrolling

【解决方案1】：

就像@yoursweater 已经建议的那样。示例见代码 sn-p。

<style>
  thead {
    position: absolute;
  }
  
  tbody {
    display: flex;
    overflow-x: scroll;
    width: 800px;
    margin-left: 73px;
  }
  
  tr {
    display: block;
    float: left;
  }
  
  td,
  th {
    display: block;
    border: 1px solid #ddd;
    clear: both
  }
</style>

<body>


  <div class="container">
    <h2>Bordered Table</h2>
    <p>The .table-bordered class adds borders to a table:</p>
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Email</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>John</td>
          <td>Doe</td>
          <td>john@example.com</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Moe</td>
          <td>mary@example.com</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>july@example.com</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>july@example.com</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>july@example.com</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>july@example.com</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>july@example.com</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>july@example.com</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>july@example.com</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>july@example.com</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>july@example.com</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>july@example.com</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>july@example.com</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>july@example.com</td>
        </tr>

      </tbody>
    </table>
  </div>
</body>

【讨论】：

感谢@Cristophs0n "display:flex" 现在可以正常工作了。但我无法修复第一列。如果我使用位置属性，那么表格的其余部分就在下面。你能帮我解决这个问题吗？
是的，没有问题！修复第一列是什么意思？
基本上我不希望标题可滚动。 FirstName,LastName,Email 就像标题一样，所以我想像在 excel 中一样冻结它。
别着急，看看更新后的代码sn-p是不是你需要的。
完全没有问题。如果你对它感到满意，你可能除了答案。谢谢

【解决方案2】：

“水平滚动”到底是什么意思？假设我理解您的要求，如果您将表格放在父 div 中，您可以使用 CSS 指定尺寸，然后在父 div 上设置 overflow: scroll; 和 white-space: nowrap; 以创建水平滚动。

【讨论】：

嗨@yourweather 我试过了，但问题是我将行和列显示为块级元素，所以整个结构没有正确显示。在 tbody 添加 display:flex 后，它起作用了。但现在我无法修复我的第一列。非常感谢您的帮助。