HTML CSS formatting: table row inherit content height

Asked 26/12, 2012 at 14:9 Answered 26/12, 2012 at 15:30

How can I format a table row to inherit the height of the content? I wish to have something like enter image description here

I have tried

table{
   table-layout:fixed;
   width:700px;
 }

but that does not work

Furcula answered 26/12, 2012 at 14:9 Comment(2)

#10919786 – Scoreboard 26/12, 2012 at 14:11

https://mcmap.net/q/1625395/-how-to-set-row-height-based-on-its-content-in-table – Scoreboard 26/12, 2012 at 14:11

Tyipcally, a table will inherit the height of the content provided that the columns have a defined width using either percentage of the total table width or absolutel pixel "px" definitions. IN addition, be sure that the table rows do not have a specified height i.e. 'height: 30px'.

Code Solution:

table {
  width: 700px;
}
table tr td {
  width: 350px;
  height: auto;
}

Backbencher answered 26/12, 2012 at 14:13 Comment(0)

A row cannot inherit inherit from the cells, as an element cannot inherit from its descendants, only from ascendants. But the calculation of a table row height takes the cell height requirements into account automatically, by the table height algorithms.

This happens in the example presented, too. Using the style sheet given and the simplest possible table markup, the result is as requested, apart from vertical alignment. That alignment is a separate issue and easily handled with td { vertical-align: top }.

If your page does not behave that way, please provide an example that demonstrates the issue (HTML and CSS code).

Fringe answered 26/12, 2012 at 15:30 Comment(0)

Recommended topics

Hot tags