Copy link to clipboard
Copied
I have these rules:
.tbl {
display: table;
}
.row {
display: table-row;
}
.th, .td {
display: table-cell;
}
.th {
padding-top: 0;
}
.td {
padding-top: 42px;
}
for the following html:
<div class="tbl">
<div class="row">
<div class="th">sample text</div>
<div class="td">Header</div>
</div>
</div>
Well, despite "padding-top:0" both divs get the maximum value of each other (42px in this case).
How can I set a different distance from the top for any of them?
Thanks
Copy link to clipboard
Copied
What ais the intended outcome of your "table"?
It will likely be much simpler to use css flexbox or grid, than to recreate a table-based layout with the seldom used table display properties...
Flexbox: https://www.w3schools.com/css/css3_flexbox.asp
Grid: https://www.w3schools.com/css/css_grid.asp