For some reason the cells in my second row in my table are changing the width of the cells in the row above. I have no idea why this is the cause. I don't want the width of the first cell in the first row to be changed. I have reproduced the problem in jsfiddle to make it clear what I mean.
FiddleJS link:
https://jsfiddle.net/bpyrgsvc/1/
HTML:
<div class="table">
<div class="row">
<div class="cell">test</div>
<div class="cell">test</div>
<div class="cell">test</div>
<div class="cell">test</div>
<div class="cell">test</div>
</div>
<div class="row">
<div class="cell">this changes the width of the cell above</div>
</div>
</div>
CSS:
.table {
display:table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
padding: 5px;
border: 1px solid black;
}
display:table
ondiv
elements? if you want a table-like style - just use the<table>
tag for this. This way you can usecolspan
.