Skip to main content
geotso
Inspiring
August 14, 2020
Question

set top margin in a display:table structure

  • August 14, 2020
  • 1 reply
  • 197 views

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

This topic has been closed for replies.

1 reply

Jon Fritz
Community Expert
Community Expert
August 14, 2020

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