Question 74412 in Reactjs Question posted in
The new location for the React Documentation can be found here.

How to make table rows take up full width of table and be underneath table headers – Reactjs

I’m struggling to get my table data to be directly underneath my table headers it’s currently looking like this on inspection:

enter image description here

enter image description here

enter image description here

enter image description here

this is what it looks like with a space around
enter image description here
, but how can I make it more centered?

Tags:

2

Answers


  1. 0

    I give you an example for your reference:

    /* 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>

    You can browse the web site to generate the div table.

    Login or Signup to reply.
  2. 0

    This is a pure flexbox example:

    .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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search