javascript 如何使表格行占据表格的全宽并位于表头下方

cgvd09ve  于 2023-02-15  发布在  Java
关注(0)|答案(2)|浏览(134)

我很难让我的表数据直接在我的表头下面,它目前看起来像这样的检查:

enter image description here

这就是

周围有一个空格的样子,但是我怎样才能使它更居中呢?

gtlvzcf8

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">&nbsp;cxvv</div>
      <div class="divTableCell">&nbsp;xcvxcv</div>
      <div class="divTableCell">&nbsp;xcvx</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">&nbsp;vxvx</div>
      <div class="divTableCell">&nbsp;wewrwe</div>
      <div class="divTableCell">&nbsp;xcvxv</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">&nbsp;xxcvxcv</div>
      <div class="divTableCell">&nbsp;dsf</div>
      <div class="divTableCell">&nbsp;sdf</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">&nbsp;vfsdf</div>
      <div class="divTableCell">&nbsp;sdfsf</div>
      <div class="divTableCell">&nbsp;dsfsdf</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">&nbsp;cxvxcv</div>
      <div class="divTableCell">&nbsp;sdfsf</div>
      <div class="divTableCell">&nbsp;sdf</div>
    </div>
  </div>
</div>

您可以浏览web site以生成div表。

9fkzdhlc

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>

相关问题