怎么用html表格实现一行平均分为5列，用colspan有问题

发布于
2021-06-11

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>mainpage</title>
        <link type="text/css" rel="stylesheet" href="css\mainpage.css">
        
    </head>
    <body>

        <table>
           
            <tr>
               
                <caption  colspan="10">个人简历</caption>
                <th class="name">xxx</th>
                <td rowspan="3" class="personalpicture">
                   
                </td>
                
            </tr>
            <tr>
                <td class="tel">tel :15999999932/199999990</td>
            </tr>
            <tr>
                
                
                
                <td class="Email">Email :19999999981@qq.com</td>
            </tr>

            <tr id="header-education">
                <th class="header-education" colspan="2">
                   教育背景 
                </th>
            </tr>

            
            <tr>
                
                <td class="education-item"  colspan="5" >大学</td>
               
                <td class="education-item"  colspan="5">学院</td> 
                <td class="education-item"  colspan="5">xx</td>
                <td class="education-item"  colspan="5">本科</td>
                <td class="education-item"  colspan="5">2019.09入学</td>
            </tr> 
            <tr></tr>
           
            
        </table>

    </body>

上为html代码
下为css代码



table{
    margin:0 auto;
    margin-top: 17px;
    
    line-height: 2.0;
    font-size: 14px;
    color: #555;
    font-family:sans-serif;
    /* font-family: "SimSun"; */
    width:800px;

    border-collapse: collapse;
    /* 设置表格的边框是否被合并为一个单一的边框 */

    border:solid #fff; 
    border-width:1px 0px 0px 1px; 
    background-color:#f1efe3;


    /* table-layout: fixed; */
}

th.name{
    height: 35px;
    /* background-color: rgb(201, 186, 146); */
    font-weight: bold;
    text-align: left;
    padding: 2px 10px;
    border: solid #fff;
    width: 87%;     
    /* 此处的width可调整图片的宽度 */
    font-size: 25px;
    font-family: SimHei;
}


td.tel,td.Email{
    border:solid #fff; 
    border-width:0px 1px 1px 0px; 
    padding:2px 10px;
    /* background-color: blue; */

    /* width: 25px; */
    height: 28px;
 }


 td.personalpicture {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url(../img/个人证件照.jpg);
    width:120px;
    height:10px;
}

th.header-education{
    font-weight: bold; 
    text-align: left;
    padding: 2px 10px;
    border: solid #fff;
    font-size: 15px;
   
}



td.education-item{
    font-weight: bold; 
    text-align: left;
    padding: 2px 10px;
    border: solid #fff;
    height:10px;
    /* width:10px;
     */
}

会出现格式不正确，图片移位各种奇葩问题，望求解，不胜感激！

前端 html css

阅读 7k

3 个回答

我是跳跳吧

✓ 已被采纳

首先你的 colspan 用法完全錯誤，下面是修正後的。另外要平均分每列寬度，可以通過 colgroup 和 col 標簽定義每一列的樣式。另外要注意，table css 要設置 table-layout: fixed;

<body>
    <table>
        <caption>个人简历</caption>
        <colgroup>
            <col span="1" style="width:20%"></col>
            <col span="1" style="width:20%"></col>
            <col span="1" style="width:20%"></col>
            <col span="1" style="width:20%"></col>
            <col span="1" style="width:20%"></col>
        </colgroup>
        <tr>           
            <th class="name" colspan="4">xxx</th>
            <td rowspan="3" class="personalpicture">
            </td>            
        </tr>
        <tr>
            <td class="tel" colspan="4">tel :15999999932/199999990</td>
        </tr>
        <tr>
            <td class="Email" colspan="4">Email :19999999981@qq.com</td>
        </tr>
        <tr id="header-education">
            <th class="header-education" colspan="5">
               教育背景 
            </th>
        </tr>
        <tr>            
            <td class="education-item">大学</td>           
            <td class="education-item">学院</td> 
            <td class="education-item">xx</td>
            <td class="education-item">本科</td>
            <td class="education-item">2019.09入学</td>
        </tr> 
        <tr>
            
        </tr>
    </table>
</body>

最終效果：https://jsbin.com/savodojuma/...