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

标签 html css html-table

下面的代码正确地显示了一个包含我需要的信息的表格；但是，列标题方式不合时宜，没有像我希望的那样显示在内容上方。

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

<div class="right_result">
                <?php
                    $orders =  get_orders_by_email($user->Username);
                    if(!empty($orders)):
                ?>
                <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>
                    <?php foreach ($orders as $order): ?>
                        <tr>
                            <td><?php echo $order->Order_Number; ?></td>
                            <td><?php echo $order->Order_Name; ?></td>
                            <td><?php echo $order->Order_Status; ?></td>
                            <td><?php echo $order->Order_Notes_Public; ?></td>
                        </tr>
                    <?php endforeach;?>
                    </tbody>
                </table>
                <?php else: ?>
                    <p>No order history to show.</p>
                <?php endif; ?>
            </div>

这有点乱，因为我一直在胡闹，但是随附的 CSS:

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;
}

最佳答案

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

如果您想要一个 250 像素的可滚动屏幕，那么请将您的表格包裹在一个可按该高度滚动的 div 中。

.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;
}
<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>

如果您想要卡住表格标题，那么您应该为标题创建一个单独的表格。然后再为数据做一张表，用卷轴包起来

.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;
}
<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>

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

关于html - 如何将表格列标题与内容对齐？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49823923/

上一篇：html - 将图标置于文本中心？

下一篇：html - float 标签在 Firefox 上不起作用

相关文章：

javascript - 使用 colspan 或 rowspan 的 html 表格选择

php - 如何用表(html)表示二叉树？

html - 如何在 html 的 2 个部分中使用不同的访问链接颜色？

javascript - javascript中的多行输出

html - Weebly 不会上传我的 CSS

javascript - 如何减少和增加文本框的值？

html - 如何仅将某些规则应用于其文本内容而不是其子项

jquery - BootStrap Jumbotron 扩展了 Navbar，并且不是独立的

css - 具有不同根位置时如何访问 Angular 解决方案中的 Assets 文件夹

jquery - 基于表行中的数据的动态 "enquiry"链接

©2024 IT工具网  联系我们