当前位置：首页 > CSS

css制作表格简历

2026-04-02 14:56:45CSS

使用CSS制作表格简历的方法

通过CSS和HTML结合可以创建简洁美观的表格简历。以下是具体实现步骤：

HTML结构

<!DOCTYPE html>
<html>
<head>
    <title>个人简历</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="resume">
        <h1>张三</h1>
        <p class="contact">电话：123-456-7890 | 邮箱：zhangsan@example.com</p>

        <table>
            <tr>
                <th colspan="2">教育背景</th>
            </tr>
            <tr>
                <td>2015-2019</td>
                <td>某某大学 - 计算机科学学士</td>
            </tr>
            <tr>
                <td>2019-2021</td>
                <td>某某大学 - 计算机科学硕士</td>
            </tr>
        </table>

        <table>
            <tr>
                <th colspan="2">工作经历</th>
            </tr>
            <tr>
                <td>2021-至今</td>
                <td>某某科技公司 - 前端开发工程师</td>
            </tr>
        </table>
    </div>
</body>
</html>

CSS样式

body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    color: #333;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.resume {
    background-color: #f9f9f9;
    padding: 30px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

h1 {
    color: #2c3e50;
    text-align: center;
    margin-bottom: 5px;
}

.contact {
    text-align: center;
    margin-bottom: 30px;
    color: #7f8c8d;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
}

th {
    background-color: #2c3e50;
    color: white;
    padding: 10px;
    text-align: left;
}

td {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

tr:nth-child(even) {
    background-color: #f2f2f2;
}

表格简历设计技巧

响应式设计

@media (max-width: 600px) {
    table {
        display: block;
    }
    tr {
        display: block;
        margin-bottom: 15px;
    }
    td {
        display: block;
        text-align: right;
        padding-left: 50%;
        position: relative;
    }
    td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 50%;
        padding-left: 15px;
        font-weight: bold;
        text-align: left;
    }
}

美化技巧

使用渐变色作为表头背景

th {
  background: linear-gradient(to right, #3498db, #2c3e50);
}

添加悬停效果

tr:hover {
  background-color: #e8f4fc;
}

使用CSS变量统一颜色主题

:root {
  --primary-color: #2c3e50;
  --secondary-color: #3498db;
}
th {
  background-color: var(--primary-color);
}

替代方案：Flexbox布局

如果不喜欢传统表格样式，可以使用Flexbox创建简历布局：

css制作表格简历

<div class="resume-section">
    <h2>教育背景</h2>
    <div class="resume-item">
        <div class="year">2015-2019</div>
        <div class="details">
            <h3>某某大学</h3>
            <p>计算机科学学士</p>
        </div>
    </div>
</div>

.resume-section {
    margin-bottom: 30px;
}

.resume-item {
    display: flex;
    margin-bottom: 15px;
}

.year {
    width: 150px;
    font-weight: bold;
}

.details {
    flex: 1;
}

这些方法都可以创建专业美观的简历，选择最适合个人需求和设计风格的方式即可。