我很难让我的表数据直接在我的表头下面,它目前看起来像这样的检查:
enter image description here
这就是周围有一个空格的样子,但是我怎样才能使它更居中呢?
gtlvzcf81#
我举个例子供大家参考:
/* DivTable.com */ .divTable { display: table; width: 100%; } .divTableRow { display: table-row; } .divTableHeading { background-color: #EEE; display: table-header-group; } .divTableCell, .divTableHead { border: 1px solid #999999; display: table-cell; padding: 3px 10px; } .divTableHeading { background-color: #EEE; display: table-header-group; font-weight: bold; } .divTableFoot { background-color: #EEE; display: table-footer-group; font-weight: bold; } .divTableBody { display: table-row-group; }
<div class="divTable"> <div class="divTableBody"> <div class="divTableRow"> <div class="divTableCell"> cxvv</div> <div class="divTableCell"> xcvxcv</div> <div class="divTableCell"> xcvx</div> </div> <div class="divTableRow"> <div class="divTableCell"> vxvx</div> <div class="divTableCell"> wewrwe</div> <div class="divTableCell"> xcvxv</div> </div> <div class="divTableRow"> <div class="divTableCell"> xxcvxcv</div> <div class="divTableCell"> dsf</div> <div class="divTableCell"> sdf</div> </div> <div class="divTableRow"> <div class="divTableCell"> vfsdf</div> <div class="divTableCell"> sdfsf</div> <div class="divTableCell"> dsfsdf</div> </div> <div class="divTableRow"> <div class="divTableCell"> cxvxcv</div> <div class="divTableCell"> sdfsf</div> <div class="divTableCell"> sdf</div> </div> </div> </div>
您可以浏览web site以生成div表。
9fkzdhlc2#
这是一个纯粹的flexbox示例:
.cell, .cellEnd, .cellTail, .container, .headerRow, .row { display: flex; flex-grow: 1; } .cell, .cellEnd, .cellTail { border-top: 1px solid black; border-left: 1px solid black; } .cellBottom { border-bottom: 1px solid black; } .cellEnd { border-bottom: 1px solid black; } .cellEnd, .cellTail { border-right: 1px solid black; } .container { flex-direction: column; } .headerRow .cell, .headerRow .cellTail { font-weight: bold; justify-content: center; } .row .cell, .row .cellEnd { padding: 3px; }
<div class="container"> <div class="headerRow"> <div class="cell"> 1 </div> <div class="cell"> 2 </div> <div class="cellTail"> 3 </div> </div> <div class="row"> <div class="cell cellBottom"> 1000 </div> <div class="cell cellBottom"> 2000 </div> <div class="cellEnd"> 3000 </div> </div> </div>
2条答案
按热度按时间gtlvzcf81#
我举个例子供大家参考:
您可以浏览web site以生成div表。
9fkzdhlc2#
这是一个纯粹的flexbox示例: