Html table 不会水平滚动？

Question

我的网站上有 table 1 行和 td 中的 div： http://www.joe-tsao.com/

通过：2017新

<div class="container">
 <table>
 <tbody>
  <tr>
  <td><div class="img">...</div></td>
   ....
  <td><div class="img">...</div></td>
  </tr>
  </tbody>
  </table>
</div>

我在 table 上使用了 overflow-x: scroll，但没有任何反应。

当鼠标悬停在 table 的内容上时，我无法滚动它。有人可以帮我解决这个问题吗？

Answer 1

我认为代码会像那样

.container{
  width: 300px;
}
.table-responsive {
 overflow-x: auto;
 min-height: 0.01%;
}
@media (min-width: 768px){
    .table-responsive {
        width: 100%;
        margin-bottom: 15px;
        overflow-y: hidden;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        border: 1px solid #ddd;
    }
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}
table {
 background-color: transparent;
}
.table {
 width: 100%;
 max-width: 100%;
 margin-bottom: 20px;
}
td, th {
 padding: 0;
}
th {
 text-align: left;
}
.table > thead > tr > th, .table > thead > tr > td, .table > tbody > tr > th, .table > tbody > tr > td, .table > tfoot > tr > th, .table > tfoot > tr > td {
 padding: 8px 20px;
 line-height: 1.42857;
 vertical-align: top;
 border-top: 1px solid #ddd;
}
.table > thead > tr > th {
 vertical-align: bottom;
 border-bottom: 2px solid #ddd;
}
.table > caption + thead > tr:first-child > th,
.table > caption + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > td,
.table > thead:first-child > tr:first-child > th,
.table > thead:first-child > tr:first-child > td {
    border-top: 0;
}

<div class="container">
  <div class="table-responsive">
    <table class="table">
      <thead>
        <tr>
          <th>1</th>
          <th>2</th>
          <th>3</th>
          <th>4</th>
          <th>5</th>
          <th>6</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Cell 1</td>
          <td>Cell 2</td>
          <td>Cell 3</td>
          <td>Cell 4</td>
          <td>Cell 5</td>
          <td>Cell 6</td>
        </tr>
        <tr>
          <td>Cell 1</td>
          <td>Cell 2</td>
          <td>Cell 3</td>
          <td>Cell 4</td>
          <td>Cell 5</td>
          <td>Cell 6</td>
        </tr>
        <tr>
          <td>Cell 1</td>
          <td>Cell 2</td>
          <td>Cell 3</td>
          <td>Cell 4</td>
          <td>Cell 5</td>
          <td>Cell 6</td>
        </tr>
        <tr>
          <td>Cell 1</td>
          <td>Cell 2</td>
          <td>Cell 3</td>
          <td>Cell 4</td>
          <td>Cell 5</td>
          <td>Cell 6</td>
        </tr>
        <tr>
          <td>Cell 1</td>
          <td>Cell 2</td>
          <td>Cell 3</td>
          <td>Cell 4</td>
          <td>Cell 5</td>
          <td>Cell 6</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Html table 不会水平滚动？

Html table won't scroll horizontal?

html

css

jquery

html-table

horizontal-scrolling