css - 如何使用CSS在表格中制作一行

我试图将一行作为下面的图像贯穿表格，但这行不通。

我想要


画一条像图像的线。
为第二个<td>中的每个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;
}

最佳答案

使用表标题（<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.

关于css - 如何使用CSS在表格中制作一行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23669474/