代码如何写表格怎么打印在a4纸上

23次阅读

要在 A4 纸上打印表格，可以使用 HTML 和 CSS 来设置表格的样式和打印格式。以下是一个简单的示例，展示了如何创建一个表格并确保它在打印时适合 A4 纸。

HTML 示例代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 打印表格示例 </title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1> 我的表格 </h1>
    <table>
        <thead>
            <tr>
                <th> 姓名 </th>
                <th> 年龄 </th>
                <th> 城市 </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td> 张三 </td>
                <td>28</td>
                <td> 北京 </td>
            </tr>
            <tr>
                <td> 李四 </td>
                <td>34</td>
                <td> 上海 </td>
            </tr>
            <tr>
                <td> 王五 </td>
                <td>22</td>
                <td> 广州 </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

CSS 示例代码（styles.css）

body {
    font-family: Arial, sans-serif;
    margin: 20px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    border: 1px solid #000;
    padding: 8px;
    text-align: left;
}

th {background-color: #f2f2f2;}

/* 打印样式 */
@media print {
    body {
        margin: 0;
        padding: 0;
    }

    table {
        width: 100%;
        page-break-inside: auto;
    }

    th, td {
        page-break-inside: avoid;
        page-break-after: auto;
    }
}