使表格单元格的边框为表格宽度的100％

Question

I have the following markup:

<div class="table">
  <div class="row">
    <div class="cell">1</div>
    <div class="cell">2</div>
  </div>
  <div class="row">
    <div class="cell">3</div>
    <div class="cell">4</div>
  </div>
  <div class="row">
    <div class="cell">5</div>
  </div>
</div>

With the following CSS:

.table {
  display: table;
  border-collapse: collapse;
  width: 100%
}

.row {
  display: table-row;
  border-bottom: 1px solid black;
}

.cell {
  display: table-cell;
  width: 50%;
}

The problem is that the border of the table-row only covers the width of its containing table-cells. I want the last table-row to have the same border width (horizontally of course ;)) like all the other table-rows, without changing its table-cell width or having to add another table-cell.

Here's the fiddle: https://jsfiddle.net/tgry53ss/

Any idea on how to achieve this?

Answer 1

Add this to your CSS:

.row:last-child::after {
  content:' ';
}

That way it will render another cell and its bottom-border without actually creating one.

fiddle

Answer 2

Since there is no rowspan / colspan in CSS. You can use flexbox instead to achieve the results you wanted. It can also make the only cell to take the entire width available just like colspan does.

 .row { display: flex; border-bottom: 1px solid; } .cell { flex: 1; } 

 <div class="table"> <div class="row"> <div class="cell">1</div> <div class="cell">2</div> </div> <div class="row"> <div class="cell">3</div> <div class="cell">4</div> </div> <div class="row"> <div class="cell">5</div> </div> </div> 

Edit: In case you don't wish the only cell to take the entire width, do this:

.row {
  display: flex;
  border-bottom: 1px solid;
}
.cell {
  flex: 0 0 50%;
}

Answer 3

I am assuming you set cell width to 50% because you had two cells in each row except last one, so one way of dealing with this will be using inline styling to override that width:

<div class="cell" style="width:100%">
    5
</div>