Question

非常简单的页面，麻烦......我只想水平滚动表格。滚动条可见，仅此而已。只有整个页面可以通过浏览器的滚动条滚动。如果我将body设置为overflow：hidden则根本没有滚动条。我是html和css的初学者。我想我已经尝试了我在网上找到的所有建议......： - \

＆＃13;

* {
box-sizing: border-box;
}
.row::before,
.row::after {
    content:"";
    display: table ;
    clear: both;
}
body {
    background-color: #ebebeb;
    font-family: "Open Sans", sans-serif;
    margin: 0;
}
.header {
    text-align: center;
    min-height: 60px;
    background-color: #575757;
    color: #fff;
    line-height: 60px;
}
.header h1 {
    margin-top: 0;
}
.rwd-table {
    max-width: 899px;
    width: 899px;
    height: 100%;
    overflow-x: scroll;
    background-color: aqua;
}

＆＃13;

<!DOCTYPE html>
<html>

<body>
    <div class="header">
        <h1>Title</h1>
    </div>
    <div class="rwd-table">
            <table class="table">
                <thead>
                    <tr>
                        <th>Godzina</th>
                        <th>Śr, 10.01</th>
                        <th>Czw, 11.01</th>
                        <th>Pt, 12.01</th>
                        <th>So, 13.01</th>
                        <th>Nd, 14.01</th>
                        <th>Pn, 15.01</th>
                        <th>Wt, 16.01</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>7.00</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

＆＃13;

Answer 1

首先为您的表格制作 display：block 然后将overflow-x:auto设置为您的表而不是div，滚动将显示为自动

＆＃13;

* {
box-sizing: border-box;
}
.row::before,
.row::after {
    content:"";
    display: table ;
    clear: both;
}
body {
    background-color: #ebebeb;
    font-family: "Open Sans", sans-serif;
    margin: 0;
}
.header {
    text-align: center;
    min-height: 60px;
    background-color: #575757;
    color: #fff;
    line-height: 60px;
}
.header h1 {
    margin-top: 0;
}
.rwd-table {
    height: 100%;
    background-color: aqua;
}
table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

＆＃13;

<!DOCTYPE html>
<html>

<body>
    <div class="header">
        <h1>Title</h1>
    </div>
    <div class="rwd-table">
            <table class="table">
                <thead>
                    <tr>
                        <th>Godzina</th>
                        <th>Śr, 10.01</th>
                        <th>Czw, 11.01</th>
                        <th>Pt, 12.01</th>
                        <th>So, 13.01</th>
                        <th>Nd, 14.01</th>
                        <th>Pn, 15.01</th>
                        <th>Wt, 16.01</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>7.00</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

＆＃13;

Answer 2

你必须给表格类一个宽度格栅，而不是 rwd-table 和rwd- table div可以滚动。

    .rwd-table {
        overflow-x: scroll;
        width: 500px;
        height: 100%;
        background-color: aqua;

    }
    .table{
        width: 5000px;
    }

html - 滚动条可见，但不起作用

2 个答案: