如何用CSS在表格中划线

我试着在下面画一条横贯桌子的线，但没有成功

我想

像图片一样画一条线

在第二个

表中为每个
设置一个项目符号

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>

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

---

使用表格标题（

）而不是嵌套表格正确构造表格：

<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。

.a {
border-top: 1px solid transparent;

}
table{border: 1px solid transparent;
  border-collapse:collapse;}

table td{ padding:5px; margin:5px;}

table+table td:last-child{border-left:
  1px solid #c4c4c4;}
table+table td:last-child:before{content:"\2022"}

table+table{border-top: 1px solid #c4c4c4; }

table.a td:last-child:before{content:"  "}

---

内容似乎不能保证一个表（您没有关联一堆数据）。为什么不设置标题和使用列表呢？你可能想在@jacob的底部加上边框，如果项目需要并排比较，这将取决于上下文。如果他们这样做了，CSS将两个并列列表中的列表项进行匹配将是不切实际的。感谢您的代码，但“穿梭巴士时间表|预约和我的请求”不是标题。您的代码符合我的第二个问题…@PMay1903如果它们不是标题，我开始认为您正在使用表格进行布局。这是非常糟糕的做法。因此，根据你的意见，你能告诉我哪一个比桌子更合适吗？谢谢。你的代码看起来不错。但是，正如我所看到的，在右侧的每个

td

标记只有一个项目符号。您能告诉我如何修改表结构使其更好吗？如果您正在构建邮件程序，那么使用嵌套表是可以的；否则，构建网页时，您不应再使用表格。嵌套表格永远不是答案。@Lego Stormtroppr我花时间没有收到

-1

。回答准确，满足用户要求。

.a {
border-top: 1px solid transparent;

}
table{border: 1px solid transparent;
  border-collapse:collapse;}

table td{ padding:5px; margin:5px;}

table+table td:last-child{border-left:
  1px solid #c4c4c4;}
table+table td:last-child:before{content:"\2022"}

table+table{border-top: 1px solid #c4c4c4; }

table.a td:last-child:before{content:"  "}