如何用Bootstrap 4实现复杂学生成绩单表格及双页横向布局？

一、实现横向正反两页打印布局 #

1. 页面结构（Laravel Blade模板） #

在Blade文件中拆分两页内容，用容器包裹，通过CSS控制分页：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生成绩单</title>
    <link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">
    <style>
        /* 自定义打印样式 */
        @media print {
            @page {
                size: landscape; /* 设置横向打印 */
                margin: 1cm;
            }
            .page-break {
                page-break-after: always; /* 强制分页 */
            }
            body {
                font-size: 12px;
            }
            /* 隐藏非打印元素 */
            .navbar, .footer {
                display: none !important;
            }
        }
    </style>
</head>
<body>
    <!-- 第一页内容 -->
    <div class="container">
        <h3 class="text-center mb-4">学生成绩单（第一页）</h3>
        <!-- 此处放置第一页的表格或其他内容 -->
    </div>

    <!-- 分页标记 -->
    <div class="page-break"></div>

    <!-- 第二页内容 -->
    <div class="container">
        <h3 class="text-center mb-4">学生成绩单（第二页）</h3>
        <!-- 此处放置第二页的表格或其他内容 -->
    </div>
</body>
</html>

2. 关键说明 #

• @page { size: landscape; } 强制打印为横向，覆盖Bootstrap默认的纵向设置。
• .page-break 类配合page-break-after: always实现精确分页，确保第一页内容结束后自动跳转至第二页。
• 打印时隐藏导航栏、页脚等非必要元素，避免干扰成绩单核心内容。

二、复刻目标表格样式 #

结合Bootstrap 4表格类与自定义CSS，还原目标表格的合并单元格、边框、表头样式：

1. 表格HTML结构 #

<div class="container mt-4">
    <table class="table table-bordered transcript-table">
        <thead>
            <tr>
                <th rowspan="2" class="text-center">序号</th>
                <th rowspan="2" class="text-center">科目名称</th>
                <th colspan="3" class="text-center">成绩</th>
                <th rowspan="2" class="text-center">排名</th>
            </tr>
            <tr>
                <th class="text-center">平时</th>
                <th class="text-center">期中</th>
                <th class="text-center">期末</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="text-center">1</td>
                <td>语文</td>
                <td class="text-center">85</td>
                <td class="text-center">88</td>
                <td class="text-center">90</td>
                <td class="text-center">5</td>
            </tr>
            <tr>
                <td class="text-center">2</td>
                <td>数学</td>
                <td class="text-center">92</td>
                <td class="text-center">95</td>
                <td class="text-center">96</td>
                <td class="text-center">2</td>
            </tr>
            <!-- 更多科目行重复上述结构即可 -->
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3" class="text-right font-weight-bold">总分</td>
                <td colspan="3" class="text-center">546</td>
            </tr>
        </tfoot>
    </table>
</div>

2. 自定义CSS调整 #

在<style>中添加以下样式，贴合目标表格视觉效果：

.transcript-table {
    border-collapse: collapse;
    width: 100%;
}
.transcript-table th, .transcript-table td {
    padding: 8px;
    border: 1px solid #000; /* 加粗边框，贴近目标样式 */
    vertical-align: middle;
}
.transcript-table thead th {
    background-color: #f0f0f0; /* 表头灰色背景 */
    font-weight: bold;
}
.transcript-table tfoot td {
    background-color: #f8f9fa;
    font-size: 13px;
}

3. 关键说明 #

• 使用rowspan和colspan实现单元格合并，匹配目标表格的表头结构。
• 自定义边框样式覆盖Bootstrap默认的浅色边框，让表格更接近目标效果。
• 通过vertical-align: middle确保单元格内容垂直居中，提升可读性。

内容的提问来源于stack exchange，提问作者Astuteni