Question

请帮我将此表格水平滚动，而不更改现有的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>

Answer 1

正如@yoursweater已经建议的那样。有关示例，请参阅代码段。

<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>

Answer 2

“水平可滚动”究竟是什么意思？假设我理解你在问什么，如果你把表放在父div中，你可以用CSS指定维度，然后在父div上设置overflow: scroll;和white-space: nowrap;来创建水平滚动。 / p>

使表可水平滚动而不更改现有的CSS属性

2 个答案: