Html表不会水平滚动？

Question

我在我的网站上有表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>

我在桌子上使用overflow-x: scroll但没有任何反应。

当鼠标悬停在表格上时，我无法获取表格的内容。有人可以帮我这个吗？

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>