Highlighted

set top margin in a display:table structure

Explorer ,
Aug 14, 2020

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

TOPICS
Code, How to

Views

19

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

set top margin in a display:table structure

Explorer ,
Aug 14, 2020

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

TOPICS
Code, How to

Views

20

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Aug 14, 2020 0
Adobe Community Professional ,
Aug 14, 2020

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 14, 2020 1