css - 如何使用 CSS 在表格中创建一行

Question

我曾尝试在表格下方画一条线作为图像，但没有成功。

我愿意

1. 像图片一样制作一条线。
2. 为每个 <td> 设置一个元素符号在2 table

HTML:

<table>
<tr>
    <table class="a">
        <tr>
            <td style="width: 300px">Shuttle Bus Schedule | Make an appointment</td>
            <td style="width: 220px">My Request</td>
        </tr>
    </table>
</tr>
<tr>
    <table>
        <tr>
            <td style="width: 300px">Need Approval by Manager</td>
            <td style="width: 220px">Need Approval by Coordinator</td>
        </tr>
        <tr>
            <td>Approved by Manager</td>
            <td>Approved by Coordinator</td>
        </tr>
        <tr>
            <td>Rejected by Manager</td>
            <td>Rejected by Coordinator</td>
        </tr>
    </table>
</tr>
</table>

CSS:

.a {
border-bottom: 1px solid #c4c4c4;
}

Answer 1

使用表格标题 ( <th> ) 而不是嵌套表格来正确构建表格:

<table>
   <tr>
        <th style="width: 300px">Shuttle Bus Schedule | Make an appointment</th>
        <th style="width: 220px">My Request</th>
    </tr>

    <tr>
        <td>Need Approval by Manager</td>
        <td>Need Approval by Coordinator</td>
    </tr>
    <tr>
        <td>Approved by Manager</td>
        <td>Approved by Coordinator</td>
    </tr>
    <tr>
        <td>Rejected by Manager</td>
        <td>Rejected by Coordinator</td>
    </tr>
</table>

CSS:

th {border-bottom:1px solid #c4c4c4};
td:before {content:"\2022";}

You can see this here on jsfiddle.