html table最后一行边框,CSS:我如何在表行上有一个边框底部,除了最后一行

本文介绍了两种方法来去除HTML表格的最后一行边框。第一种是在HTML中为最后一行添加特殊类,然后在CSS中针对该类设置边框为无。第二种方法是利用CSS的`:last-child`伪类,直接在CSS中定义表格最后一行的边框为无,无需修改HTML。这两种方法提供了灵活性,可以根据项目需求选择合适的方式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

你有两个选择:(1)在HTML中添加一个专门的类到最后一行;或者(2)在CSS中使用:last-child伪类。

选项1:专业类

如果您可以将类应用于HTML,则可以向最后一行添加专门类。如果您的标记是由服务器端脚本(例如PHP脚本)生成的,您将需要编辑该脚本以添加类似的标记。

HTML:

CSS:

table

{

border-collapse:collapse;

}

tr

{

border-bottom: 1px solid #000;

}

tr.last

{

border-bottom: none;

}

选项2:CSS伪类

另一种方法是使用:last-child CSS伪类。使用:last-child类不需要对HTML进行任何更改,因此如果您无法更改HTML,则可能是更好的选择。 CSS几乎与上述相同:

CSS:

table

{

border-collapse:collapse;

}

tr

{

border-bottom: 1px solid #000;

}

tr:last-child

{

border-bottom: none;

}

要为el-table最后一行添加边框,可以使用以下解决方案。首先,可以通过添加以下CSS样式来去除el-table的每一条数据的下边框表格的最下面一行边框: ```css .el-table td { border-bottom: none; } .tableStyle::before { width: 0; } .el-table { border: 1px solid #ccc; } ``` 如果上述方法无效,可以尝试使用以下代码片段: ```html <style lang="less" scoped> /deep/ .el-table { .el-table__fixed, .el-table__fixed-right { height: 100% !important; } } </style> ``` 或者,可以直接复制以下代码段: ```css .el-table { /deep/ .el-table__body-wrapper { overflow-x: scroll !important; } } ``` 这些方法可以帮助你为el-table最后一行添加边框。 #### 引用[.reference_title] - *1* [el-table设置表格显示外边框头的下边框](https://blog.youkuaiyun.com/xiaolu1na/article/details/125580216)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [el-table最后一行被覆盖遮挡](https://blog.youkuaiyun.com/FalconKkv/article/details/123105043)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [el-table使用fixed后,最后一行显示不全;el-table设置fixed后,最后一行被遮挡。](https://blog.youkuaiyun.com/i_am_a_div/article/details/121926622)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值