固定表格宽度和溢出：自动。如何让它滚动？答案

【问题标题】：Fixed table width and overflow:auto. How get it to scroll?固定表格宽度和溢出：自动。如何让它滚动？
【发布时间】：2017-05-15 18:12:17
【问题描述】：

我正在努力更好地理解我的 Wordpress 网站的编码，因此我下定决心尽可能多地消除插件，从一个不应该很难的表格插件开始..

我希望表格以固定宽度（756 像素）显示，并且如果在较小的显示器上查看内容或调整浏览器窗口大小时，我希望表格滚动。目标是保持表格布局完全相同。

问题是，当我指定宽度时，表格只是被剪裁而没有滚动选项，当我将宽度设置为 100% 时，表格会调整我不想要的大小。

我尝试对我使用的插件进行逆向工程，但我想我还没有知识来完成它。

现在花了很长时间，我只想继续前进到下一个障碍：)

Table so far

html:

<div class="tabel">
    <table>
        <tr>
            <th>Eten &amp; Drinken<br /><img src="http://travelaar.nl/wp-content/uploads/2016/12/eten-en-drinken-kraam.png" /></th>
            <th>Slapen<br /><img src="http://travelaar.nl/wp-content/uploads/2016/03/slapen.png" /></th>
            <th>Vervoer<br /><img src="http://travelaar.nl/wp-content/uploads/2016/12/vervoer-trein-icon.png" /></th>
            <th>Excursies<br /><img src="http://travelaar.nl/wp-content/uploads/2016/03/excursies.png" /></th>
            <th>Overige<br /><img src="http://travelaar.nl/wp-content/uploads/2016/03/overige.png" /></th>
            <th>Totaal</th>
        </tr>
        <tr>
            <td>&#8369; 35.460,05</td>
            <td>&#8369; 30.484,84</td>
            <td>&#8369; 16.254,76</td>
            <td>&#8369; 5.836,00</td>
            <td>&#8369; 4.086,28</td>
            <td>&#8369; 92.121,93</td>
        </tr>
        <tr>
            <td>&#8364;673,74</td>
            <td>&#8364;579,21</td>
            <td>&#8364;308,84</td>
            <td>&#8364;110,88</td>
            <td>&#8364;77,64</td>
            <td>&#8364;1.750,32</td>
        </tr>
    </table>
</div>

css:

.tabel {
  white-space: nowrap;
  overflow-x: auto;
  font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
  background: -webkit-radial-gradient(top left, rgba(185,204,102,0.5),      rgba(144,72,138,0.5));
}
table {
  border-collapse: collapse;
  border: 3px solid black;
  table-layout: fixed;
}
tr, th, td {
  text-align:center;
  border: 1px solid black;
  margin: 5px;
  white-space: nowrap;
}
th {
  vertical-align: top;
}

【问题讨论】：

我使用 Chrome、Safari 和 Firefox（都在 Mac 上）尝试了这个，它在上面写的窄框架中水平滚动（我没有做任何更改）。这是一个jsbin，看看是否得到相同的结果-jsbin.com/fuvehe/2/edit?html,css,output

标签： wordpress scroll html-table width overflow

【解决方案1】：

我想通了..对于任何感兴趣的人..这是结果和答案。

html:

<html>
<head>
    <link rel="stylesheet" type="text/css"  href="livecss.css">
</head>
<body>
    <table class="tabel">
        <tr>
            <th colspan="6">Indonesi&euml; - 29 dagen</th>
      </tr>
        <tr>
            <th>Eten &amp; Drinken<br /><img src="http://travelaar.nl/wp-content/uploads/2016/12/eten-en-drinken-kraam.png" /></th>
            <th>Slapen<br /><img src="http://travelaar.nl/wp-content/uploads/2016/03/slapen.png" /></th>
            <th>Vervoer<br /><img src="http://travelaar.nl/wp-content/uploads/2016/12/vervoer-trein-icon.png" /></th>
            <th>Excursies<br /><img src="http://travelaar.nl/wp-content/uploads/2016/03/excursies.png" /></th>
            <th>Overige<br /><img src="http://travelaar.nl/wp-content/uploads/2016/03/overige.png" /></th>
            <th>Totaal</th>
        </tr>
        <tr>
            <td>&#8369; 35.460,05</td>
            <td>&#8369; 30.484,84</td>
            <td>&#8369; 16.254,76</td>
            <td>&#8369; 5.836,-</td>
            <td>&#8369; 4.086,28</td>
            <td>&#8369; 92.121,93</td>
        </tr>
        <tr>
            <td>&#8364; 673,74</td>
            <td>&#8364; 579,21</td>
            <td>&#8364; 308,84</td>
            <td>&#8364; 110,88</td>
            <td>&#8364; 77,64</td>
            <td>&#8364; 1.750,32</td>
        </tr>
    </table>

css（包括自定义滚动条；））

/*TABEL CSS*/
table {
    overflow-x: auto;
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
    /*background: -webkit-radial-gradient(top left, rgba(185,204,102,0.5), rgba(144,72,138,0.5))*/
    border-collapse: collapse;
    display: block;
        table-layout: fixed;
    border-style: hidden;
}
th, td {
  border: 1px solid white;
  white-space: nowrap;
}
th {
    text-align: center;
  vertical-align: top;
  background-color: #b9cc66;
    padding: 5px;
}
td {
    text-align: right;
    padding: 5px 10px 5px 5px;
  background-color: rgba(144,72,138,0.5)
}

.tabel tr > td:last-of-type {
    background-color: rgba(144,72,138,0.8)
}

  /*SCROLLBAR STYLE*/
  ::-webkit-scrollbar {
      -webkit-appearance: none;
  }

  ::-webkit-scrollbar:vertical {
      width: 12px;
  }

  ::-webkit-scrollbar:horizontal {
      height: 12px;
  }

  ::-webkit-scrollbar-thumb {
      background-color: rgba(0,0,0,0.5);
      border-radius: 10px;
      border: 2px solid #ffffff;
  }

  ::-webkit-scrollbar-track {
      border-radius: 10px;
      background-color: rgba(185,204,102,0.2);
  }
  /*EINDE SCROLLBAR STYLE*/
/*EINDE TABEL CSS*/

【讨论】：