Question

我在自己的网站上制作了一个水平可滚动的table，并且像往常一样使整个网站longer。（截图）有办法防止这种情况吗？这是我的html和css

.wrapper {
    /*  table */
    height: 40%;
    width: 60%;
    overflow: scroll;
    white-space: nowrap;
    border-collapse: collapse;
    padding: 0;
    margin: 0;
}

.wrapper_ div {
    /* div around table */
    display: inline-block;
    overflow-y: hidden;
}

<div class="wrapper_">
    <table border="1" style="font-size:10pt;" class="wrapper">
        <tr>
            <th></th>
            <th>受注番号</th>
            <th>会社名</th>
            <th>受注日</th>
            <th>販売会社</th>
            <th>契約年数</th>
            <th>月額利用料</th>
        </tr>
        <tbody>
            <!-- SOME PHP INSIDE -->
        </tbody>
    </table>
</div>

Answer 1

<div class="wrapper_">
    <table border="1" style="font-size:10pt;" class="wrapper">
        <tr><th></th><th>受注番号</th><th>会社名</th><th>受注日</th><th>販売会社</th><th>契約年数</th><th>月額利用料</th></tr>
        <tbody>
            < SOME PHP INSIDE ?>
        </tbody>
    </table>
</div>

.wrapper {   /*  table */
  height:40%; 
  width:60%;
  white-space:nowrap;
  border-collapse: collapse;
  padding: 0; 
  margin: 0;
}
.wrapper_ { /* remove div */
  display: block;
  overflow-y: hidden;
  overflow-x: auto
}

页面表中的水平滚动使页面宽度超过100％

1 个答案: