我有一個具有這種形式的表格 css：第 1、2 和 3 列是行內塊，第 4 和 5 列是塊。我想要占據螢屏 100% 的表格行之間的底線分隔線，而不是 div。
現在底線分隔線的寬度為 100%，但我想覆寫整個螢屏。左右兩邊不會一直走，這就是我想要的，他們會走。
我正在使用這個：
.dataTable tbody tr:after {
content: "";
position: absolute !important;
height: 1px !important;
width: 100% !important;
background-color: #dddddd !important;
}
謝謝。
例子：
.dataTable {
border: none !important;
}
.dataTable td:nth-child(1) {
display: inline-block !important;
}
.dataTable td:nth-child(2) {
display: inline-block !important;
}
.dataTable td:nth-child(3) {
display: inline-block !important;
}
.dataTable td:nth-child(4) {
display: block !important;
}
.dataTable td:nth-child(5) {
display: block !important;
margin-left: -25px !important;
}
.dataTable thead tr {
position: absolute;
left: -9999px;
}
.dataTable th,
.dataTable td {
padding: 10px;
border-bottom: none !important;
}
.dataTable tbody tr:after {
content: "";
position: absolute !important;
height: 1px !important;
width: 100% !important;
background-color: #dddddd !important;
}<table id="ptp_f8a8c39ec1dfbfd6_1" class="posts-data-table dataTable no-footer dtr-inline" data-config="{"pageLength":-1,"pagingType":"numbers","serverSide":false,"autoWidth":true,"clickFilter":true,"scrollOffset":15,"resetButton":false,"lengthMenu":[[10,25,50,100,-1],[10,25,50,100,"All"]],"columnDefs":[{"className":"col-data_prova","targets":0},{"className":"col-illa_compet","targets":1},{"className":"col-modalitat_compet","targets":2},{"className":"col-title","targets":3},{"className":"col-actaresultats_prova","targets":4}],"dom":"<\"posts-table-wrapper generatepress\"<\"posts-table-above posts-table-controls\">t>"}" data-filters="false" data-order="[]" style="visibility: visible; position: static; width: 100%;" width="100%"><thead><tr><th class="all col-data_prova sorting_disabled" data-name="data_prova" data-orderable="false" data-searchable="true" rowspan="1" colspan="1" style="width: 29px;" aria-label="Data">Data</th><th data-name="illa_compet" data-orderable="false" data-searchable="true" data-click-filter="true" class="col-illa_compet sorting_disabled" rowspan="1" colspan="1" style="width: 20px;" aria-label="Illa">Illa</th><th data-name="modalitat_compet" data-orderable="false" data-searchable="true" data-click-filter="true" class="col-modalitat_compet sorting_disabled" rowspan="1" colspan="1" style="width: 60px;" aria-label="Modalitat">Modalitat</th><th data-name="title" data-orderable="false" data-searchable="true" data-priority="1" class="col-title sorting_disabled" rowspan="1" colspan="1" style="width: 78px;" aria-label="Competició">Competició</th><th data-name="actaresultats_prova" data-orderable="false" data-searchable="true" class="col-actaresultats_prova sorting_disabled" rowspan="1" colspan="1" style="width: 60px;" aria-label="Resultats">Resultats</th></tr></thead><tbody><tr id="post-row-6228" class="post-row post-type-competicions competicions-6228 publish odd"><td data-sort="1616198400" class="col-data_prova dtr-control" tabindex="0">20/03/2021</td><td class=" col-illa_compet">Mallorca</td><td class=" col-modalitat_compet">Trail</td><td class=" col-title"><a href="https://www.faib.es/competicions/6228/">I Trail-Running Son Quint Palma – Night</a></td><td class=" col-actaresultats_prova"></td></tr><tr id="post-row-6229" class="post-row post-type-competicions competicions-6229 publish even"><td data-sort="1616284800" class="col-data_prova dtr-control" tabindex="0">21/03/2021</td><td class=" col-illa_compet">Mallorca</td><td class=" col-modalitat_compet">Trail</td><td class=" col-title"><a href="https://www.faib.es/competicions/6229/">I Trail-Running Son Quint Palma – Day</a></td><td class=" col-actaresultats_prova"></td></tr><tr id="post-row-6340" class="post-row post-type-competicions competicions-6340 publish odd"><td data-sort="1616889600" class="col-data_prova dtr-control" tabindex="0">28/03/2021</td><td class=" col-illa_compet">Mallorca</td><td class=" col-modalitat_compet">Ruta</td><td class=" col-title"><a href="https://www.faib.es/competicions/6340/">San Silvestre Palma 2020</a></td><td class=" col-actaresultats_prova"></td></tr></tbody></table>重要提示：表格是自動生成的，我無法編輯它來添加類。CSS 必須使用附表的 HTML 完成。
uj5u.com熱心網友回復：
- 首先，填充提供了空間。
- 唯一需要的是 set
left:0和right:0for 偽元素::before::after。 - 為您的
.dataTable tbody tr:after設定left:0和right:0. - 或者我不確定，但你
table有 10px 的填充，所以設定width:calc(100% 20px)。 - 下面只是一個復制。
.main {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background: #f5f5f5;
}
.table {
position: relative;
background: #fff;
padding: 15px;
width: calc(100% - 60px);
}
.table .block {
display: block;
}
/*for thoes border*/
.table::before,
.table::after {
content: "";
display: inline-block;
height: 2px;
width: 100%;
background-color: #c5c5c5;
position: absolute;
top: 10px;
left: 0;
right: 0;
}
.table::after {
top: initial;
bottom: 10px;
}<div class="main">
<div class="table">
<span>a</span>
<span>b</span>
<span>c</span>
<span class="block">d</span>
<span class="block">e</span>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/496879.html
標籤：css
上一篇：文字出現影片