未闭合的横向 HTML 表边框

Question

Is it possible to have the side borders of HTML tables like this: HTML 表的边框是否可以像这样：

A vertical line that is not connected to the top and bottom of the table.不连接表格顶部和底部的垂直线。

Answer 1

You can try this:你可以试试这个：

 body{ background:grey; } table, th, td { border-top: 1px solid #fff; border-bottom: 1px solid #fff; border-collapse: collapse; text-align:center; padding:10px; } table { position: absolute; left:50%; top:50%; transform:translate(-50%,-50%); border:2px solid #fff; } td { position:relative; } td::after { content:''; position:absolute; height:70%; width:100%; left:0; top:7px; border-left:3px solid #fff; } td:nth-child(1)::after { display:none; }

 <:DOCTYPE html> <html> <head> </head> <body> <table style="width:20%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table> </body> </html>

Answer 2

 .table { background-color: #272727; width: 100%; text-align: left; border-collapse: collapse; }.table__body-row { height: 41px; border-bottom: 1px solid #000000; }.table__body-row.filled { background: #191919; }.table__body-cell { font-size: 14px; color: #FFFFFF; border: none; }.table__header { background: #000000; }.table__header-row { height: 40px; }.table__header-cell { font-size: 12px; font-weight: 400; color: #FFFFFF; text-align: left; padding: 0 16px 0 16px; }.table__cell-body { border-right: 1px solid #000000; padding: 0 10px 0 10px; min-height: 17px; }.table__body-cell:last-of-type.table__cell-body { border-right: none; }

 <table class="table"> <thead class="table__header"> <tr class="table__header-row"> <th class="table__header-cell"> Header 1 </th> <th class="table__header-cell"> Header 2 </th> </tr> </thead> <tbody id="tableBody"> <tr class="table__body-row"> <td class="table__body-cell"> <div class="table__cell-body"></div> </td> <td class="table__body-cell"> <div class="table__cell-body"></div> </td> </tr> </tbody> </table>

This can be done using a nested div with a border.这可以使用带边框的嵌套div来完成。 Please see snippet.请看片段。

未闭合的横向 HTML 表边框

问题描述

2 个解决方案

解决方案1
0 2021-11-27 19:37:28

解决方案2
0 已采纳 2022-03-06 16:58:29

未闭合的横向 HTML 表边框

问题描述

2 个解决方案

解决方案1 0 2021-11-27 19:37:28

解决方案2 0 已采纳 2022-03-06 16:58:29

解决方案1
0 2021-11-27 19:37:28

解决方案2
0 已采纳 2022-03-06 16:58:29