制作一个只有水平线的桌子

aco*_*cio 7 html css

如何table仅使用水平线构建HTML和CSS ?我已经尝试了很多东西,但我无法让它工作.

像这样的东西:

姓名 (空格)年龄


安德烈(太空)12


何塞(太空)16


Jos*_*eam 18

可能像这样(jsfiddle):

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

tr {
    border-bottom: 1px solid #ccc;
}

th {
    text-align: left;    
}
Run Code Online (Sandbox Code Playgroud)

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Jose</td>
            <td>25</td>
        </tr>
        <tr>
            <td>Alberto</td>
            <td>32</td>
        </tr>
    </tbody>
</table>
Run Code Online (Sandbox Code Playgroud)


Dea*_*atk 5

水平分隔线的 css 是:

th, td {
  border-bottom: 1px solid #ddd;
}
Run Code Online (Sandbox Code Playgroud)

请参阅: https: //www.w3schools.com/css/css_table.asp