Question

我正在尝试控制表体的高度，以便在显示的数据超出视图范围时显示滚动条，并且必须保持可见。与此同时，我试图控制表格列的宽度。

可以通过设置＆＃39; display：block＆＃39;来控制桌面高度。在表体css。表体现在将受到容器高度或表体设置的任何高度的限制。这会使列宽变得混乱。

可以通过根据需要进行设置来确保色谱柱宽度。只要tbody没有设置为＆＃39; display：block＆＃39;列显示正确，但tbody失控，忽略了您可能设置的任何高度。

我尝试这样做是为了使结果能够轻松地符合第508章的要求，适用于残障人士的屏幕阅读器技术。在这一点上，我计划转换为jquery.dataTables，它将视图端口放在表的顶部，这样我就可以保持508合规性并获得我需要的功能。对于我想要完成的事情来说，这似乎是最重要的，但我无法找到一种简单的方法来使用本机表和基本的css。

测试代码如下：

<div id="div1">
<table>
    <colgroup>
        <col id='col-1'>
        <col id='col-2'>
    </colgroup>
    <thead>
        <tr>
            <th>Month</th>
            <th>Savings</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>January</td>
            <td>$100</td>
        </tr>
        <tr>
            <td>February is a long month that seems like it could go on forever!</td>
            <td>$80</td>
        </tr>
        <tr>
            <td>March</td>
            <td>$180</td>
        </tr>
        <tr>
            <td>April</td>
            <td>$86</td>
        </tr>
        <tr>
            <td>May</td>
            <td>$98</td>
        </tr>
        <tr>
            <td>June</td>
            <td>$29</td>
        </tr>
        <tr>
            <td>July</td>
            <td>$44</td>
        </tr>
        <tr>
            <td>August</td>
            <td>$244</td>
        </tr>
    </tbody>
</table>

#div1 {
height: 100px;
width: 400px;
padding: .5px;
border: 1px solid red;
}
colgroup {
width: 100%;
}
#col-1 {
width:70%;
}
#col-2 {
width:30%;
}
table {
width: 100%;
table-layout: auto;
}
thead {
background-color: #B2DFFF;
}
tbody {
height: 72px;
overflow-y: scroll;
background-color: #F0F0F0;
/* display:block;   This will set column width correctly but it messes up tbody height */
display:block;  /* This will allow height to be set but it messes up columns width */
}

有没有人有任何想法？

Answer 1

将overflow:scroll;添加到#div1以添加超过100px高度的滚动。

http://jsfiddle.net/NK378/13/

修改

我无法从您的问题中看到您始终希望标题在视图中。要做到这一点，请使用tbody的样式，因此它不适用于标题..所以tbody标签的id为“scroll”，而#scroll的css为：

#scroll { display:block; overflow-y: scroll; display: block; height: 20px; width:400px; }

http://jsfiddle.net/NK378/17/

Answer 2

您不应在表格上使用display: block。他们需要默认的display: table才能正常运行。

您可以将包含div设置为在溢出时滚动：

#div1 {
  height: 100px;
  width: 400px;
  padding: .5px;
  border: 1px solid red;
  overflow-y: scroll; /* Added */
}

<强> Demo

<强>更新

我完全错过了thead不滚动的要求。实现此目的的一种方法是将另一个表嵌套在第一个表中，以将其与thead分开。您可以在<div>内放置<td>，这样就可以创建滚动。

<div id="div1">
    <table>
        <thead>
            <tr>
                <th>Month</th>
                <th class="savings">Savings</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="2">
                    <div class="table-body">
                        <table>
                            <tbody>
                                <tr>
                                    <td>January</td>
                                    <td>$100</td>
                                </tr>
                                 <tr>
                                    <td>February is a long month that seems like it could go on forever!</td>
                                    <td>$80</td>
                                </tr>
                                <tr>
                                    <td>March</td>
                                    <td>$180</td>
                                </tr>
                                <tr>
                                    <td>April</td>
                                    <td>$86</td>
                                </tr>
                                <tr>
                                    <td>May</td>
                                    <td>$98</td>
                                </tr>
                                <tr>
                                    <td>June</td>
                                    <td>$29</td>
                                </tr>
                                <tr>
                                    <td>July</td>
                                    <td>$44</td>
                                </tr>
                                <tr>
                                    <td>August</td>
                                    <td>$244</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

其他一些款式

th:first-child, td:first-child {
    width: 80%;
}

table table td {
    padding: 4px 5px;
}

.table-body {
    height: 100px;
    overflow: auto;
}

<强> UPDATED DEMO

Answer 3

将overflow: auto添加到容器div的css。

链接到JSFiddle：http://jsfiddle.net/bmarple/NK378/10/

Answer 4

有可能，只需要考虑一下：

thead {display: table; width: 100%;}
tbody {display: block; overflow: auto;}
tbody tr {display: table; width: 100%;}
td, th {/* should set a width for each td, th*/}

这是一个例子：http://jsfiddle.net/NK378/14/

Answer 5

尝试将“display”属性更改为“inline-block”和“max-width”，“min-width”，“overflow-x”，“white-space”，如下所示：的 CSS

tbody td { display: inline-block; max-width: 100px; min-width: 100px; overflow-x: scroll; white-space: nowrap; }

JSFIDDLE 观看表格中的第二行。

如果你想限制你的td的高度： CSS

tbody td { display: inline-block; max-width: 100px; min-width: 100px; overflow-y: scroll; max-height: 30px; min-height: 30px; overflow-x: hidden; }

JSFIDDLE

如何设置html表的高度和列宽？

5 个答案: