未閉合的橫向 HTML 表邊框
[英]Unclosed lateral HTML table border
問題描述
HTML 表的邊框是否可以像這樣：
不連接表格頂部和底部的垂直線。
2 個解決方案
解決方案1
0 2021-11-27 19:37:28
你可以試試這個：
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>
解決方案2
0 已采納 2022-03-06 16:58:29
.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>
這可以使用帶邊框的嵌套div來完成。 請看片段。
沒有邊框的html表格單元格
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.