如何将表列标题与内容对齐？

时间：2018-04-13 19:30:04

标签： html css html-table

以下代码正确显示了包含我需要的信息的表格;但是，列标题 way 不在线，并且不会出现在我想要的内容之上。

请记住，我还想保持滚动的能力。

table.display{  
}
table.display thead { 
    display: table-header-group;
}
table.display tbody {
  height: 250px;
  overflow: auto;  
  display: block;
}

table.display {
    border: 1px solid #ddd;
}

table.display td {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
}

table.display td:first-child {
    border-left: none;
}

table.display td:last-child {
    border-right: none;
}
table.display thead{    
    color: #555;
}

这有点乱，因为我一直在玩弄它，但附带的CSS：

SELECT *
FROM IM_PRC ip 
INNER JOIN IM_ITEM ii ON ip.ITEM_NO = ii.ITEM_NO 
INNER JOIN IM_INV_CELL iic ON ip.ITEM_NO = iic.ITEM_NO 
     WHERE ii.ITEM_VEND_NO = 'X'

1 个答案:

答案 0 :(得分：0)

您正在将tbody设置为display: block;，这意味着它将不再充当表格，并且不会与您的标题对齐。删除它。

如果你想要一个250px的可滚动，那么将你的表包装在一个可以用这个高度滚动的div中。

＆＃13;
＆＃13; 
.right_result {
    display: inline-block;
    height: 250px;
    overflow: auto;
}

table.display { }

table.display thead {
    display: table-header-group;
}

table.display {
    border: 1px solid #ddd;
}

table.display td {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
}

table.display td:first-child {
    border-left: none;
}

table.display td:last-child {
    border-right: none;
}

table.display thead {
    color: #555;
}
＆＃13; 
<div class="right_result">
    <table id="order_table" class="display">
        <thead>
            <tr>
                <th><strong>Order Number</strong></th>
                <th><strong>Property Address</strong></th>
                <th><strong>Status</strong></th>
                <th><strong>Notes</strong></th>
            </tr>
        </thead>
        <tbody>

            <tr>
                <td>Data</td>
                <td>Data</td>
                <td>Data</td>
                <td>Data</td>
            </tr>
            <tr>
                <td>Data</td>
                <td>Data</td>
                <td>Data</td>
                <td>Data</td>
            </tr>
            <tr>
                <td>Data</td>
                <td>Data</td>
                <td>Data</td>
                <td>Data</td>
            </tr>
            <tr>
                <td>Data</td>
                <td>Data</td>
                <td>Data</td>
                <td>Data</td>
            </tr>
             <tr>
                <td>Data</td>
                <td>Data</td>
                <td>Data</td>
                <td>Data</td>
            </tr>
            <tr>
                <td>Data</td>
                <td>Data</td>
                <td>Data</td>
                <td>Data</td>
            </tr>
            <tr>
                <td>Data</td>
                <td>Data</td>
                <td>Data</td>
                <td>Data</td>
            </tr>
            <tr>
                <td>Data</td>
                <td>Data</td>
                <td>Data</td>
                <td>Data</td>
            </tr>
             <tr>
                <td>Data</td>
                <td>Data</td>
                <td>Data</td>
                <td>Data</td>
            </tr>
            <tr>
                <td>Data</td>
                <td>Data</td>
                <td>Data</td>
                <td>Data</td>
            </tr>
            <tr>
                <td>Data</td>
                <td>Data</td>
                <td>Data</td>
                <td>Data</td>
            </tr>
            <tr>
                <td>Data</td>
                <td>Data</td>
                <td>Data</td>
                <td>Data</td>
            </tr>
             <tr>
                <td>Data</td>
                <td>Data</td>
                <td>Data</td>
                <td>Data</td>
            </tr>
            <tr>
                <td>Data</td>
                <td>Data</td>
                <td>Data</td>
                <td>Data</td>
            </tr>
            <tr>
                <td>Data</td>
                <td>Data</td>
                <td>Data</td>
                <td>Data</td>
            </tr>
            <tr>
                <td>Data</td>
                <td>Data</td>
                <td>Data</td>
                <td>Data</td>
            </tr>

        </tbody>
    </table>
</div>
＆＃13;
＆＃13;
＆＃13;

如果你想要冷冻表头，那么你应该只为标题创建一个单独的表。然后为数据创建另一个表并将其包装在滚动

中

＆＃13;
＆＃13; 
.wrapper {
    width: 500px;
}

.right_result {
    height: 250px;
    overflow: auto;
}

table { width: 100%;}

table.display thead {
    display: table-header-group;
    text-align: left;
}

table.display tbody {}

table.display {
    border: 1px solid #ddd;
}

table.display td {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
}

table.display td:first-child {
    border-left: none;
}

table.display td:last-child {
    border-right: none;
}

table.display thead {
    color: #555;
}
＆＃13; 
<div class="wrapper">
    <table class="display">
        <thead>
            <tr>
                <th width="25%"><strong>Order Number</strong></th>
                <th width="25%"><strong>Property Address</strong></th>
                <th width="25%"><strong>Status</strong></th>
                <th width="25%"><strong>Notes</strong></th>
            </tr>
        </thead>
    </table>
    <div class="right_result">
        <table id="order_table" class="display">
            <tbody>

                <tr>
                    <td width="25%">Data</td>
                    <td width="25%">Data</td>
                    <td width="25%">Data</td>
                    <td width="25%">Data</td>
                </tr>
                <tr>
                    <td>Data</td>
                    <td>Data</td>
                    <td>Data</td>
                    <td>Data</td>
                </tr>
                <tr>
                    <td>Data</td>
                    <td>Data</td>
                    <td>Data</td>
                    <td>Data</td>
                </tr>
                <tr>
                    <td>Data</td>
                    <td>Data</td>
                    <td>Data</td>
                    <td>Data</td>
                </tr>
                <tr>
                    <td>Data</td>
                    <td>Data</td>
                    <td>Data</td>
                    <td>Data</td>
                </tr>
                <tr>
                    <td>Data</td>
                    <td>Data</td>
                    <td>Data</td>
                    <td>Data</td>
                </tr>
                <tr>
                    <td>Data</td>
                    <td>Data</td>
                    <td>Data</td>
                    <td>Data</td>
                </tr>
                <tr>
                    <td>Data</td>
                    <td>Data</td>
                    <td>Data</td>
                    <td>Data</td>
                </tr>
                <tr>
                    <td>Data</td>
                    <td>Data</td>
                    <td>Data</td>
                    <td>Data</td>
                </tr>
                <tr>
                    <td>Data</td>
                    <td>Data</td>
                    <td>Data</td>
                    <td>Data</td>
                </tr>
                <tr>
                    <td>Data</td>
                    <td>Data</td>
                    <td>Data</td>
                    <td>Data</td>
                </tr>
                <tr>
                    <td>Data</td>
                    <td>Data</td>
                    <td>Data</td>
                    <td>Data</td>
                </tr>
                <tr>
                    <td>Data</td>
                    <td>Data</td>
                    <td>Data</td>
                    <td>Data</td>
                </tr>
                <tr>
                    <td>Data</td>
                    <td>Data</td>
                    <td>Data</td>
                    <td>Data</td>
                </tr>
                <tr>
                    <td>Data</td>
                    <td>Data</td>
                    <td>Data</td>
                    <td>Data</td>
                </tr>
                <tr>
                    <td>Data</td>
                    <td>Data</td>
                    <td>Data</td>
                    <td>Data</td>
                </tr>

            </tbody>
        </table>
    </div>
</div>
＆＃13;
＆＃13;
＆＃13;

能够div。然后确保两个表的表格单元格具有相同的宽度。

相关问题
最新问题