如何設置HTML表的高度和列的寬度？

Question

我試圖控制表格主體的高度，以便在顯示的數據量超過視圖中容納的數據量時滾動條出現，thead必須保持可見狀態。 同時，我試圖控制表格列的寬度。

可以通過在表主體css中設置“ display：block”來控制表高度。 現在，工作台主體將受到容器高度或工作台主體設置為任何高度的限制。 但是，這會弄亂列的寬度。

通過設置所需的寬度可以確保列寬。 只要未將tbody設置為“ display：block”，列就會正確顯示，但是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 */
}

演示版

---

更新

我完全錯過了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;
}

更新的演示

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