HTML CSS formatting: table row inherit content height

Question

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

I have tried

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

but that does not work

Answer 1

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;
}