Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can I use a min-height for table, tr or td?

Tags:

html

css

People also ask

Can you put a table in a TR?

putting table inside table is totally valid, write a simple html code where you insert a table inside the TD and paste it in the w3 validator: validator.w3.org/check You will notice it will passed. all errors are related to the doctype and head missing tags.

How do you adjust the height of a TR table?

The height of rows 'tr' in a table can be fixed very easily. This can be done by adding the height attribute in the tr tag. If the height is not specified, the height of the row changes according to the content. The height can be specified either in pixels, or percentage.

What is TR and TD in table?

The <td> tag defines the standard cells in the table which are displayed as normal-weight, left-aligned text. The <tr> tag defines the table rows. There must be at least one row in the table. The <th> tag defines the header cells in the table which are displayed as bold, center-aligned text.

How do you control the height of a table?

Click Table from the menu bar and select Cell Height and Width. To adjust the row height: Click the Row tab. Select the Height of row option from the drop-down menu.


height for td works like min-height:

td {
  height: 100px;
}

instead of

td {
  min-height: 100px;
}

Table cells will grow when the content does not fit.

https://jsfiddle.net/qz70zps4/


It's not a nice solution but try it like this:

<table>
    <tr>
        <td>
            <div>Lorem</div>
        </td>
    </tr>
    <tr>
        <td>
            <div>Ipsum</div>
        </td>
    </tr>
</table>

and set the divs to the min-height:

div {
    min-height: 300px;
}

Hope this is what you want ...


The solution without div is used a pseudo element like ::after into first td in row with min-height. Save your HTML clean.

table tr td:first-child::after {
   content: "";
   display: inline-block;
   vertical-align: top;
   min-height: 60px;
}

In CSS 2.1, the effect of 'min-height' and 'max-height' on tables, inline tables, table cells, table rows, and row groups is undefined.

So try wrapping the content in a div, and give the div a min-height jsFiddle here

<table cellspacing="0" cellpadding="0" border="0" style="width:300px">
    <tbody>
        <tr>
            <td>
                <div style="min-height: 100px; background-color: #ccc">
                    Hello World !
                </div>
            </td>
            <td>
                <div style="min-height: 100px; background-color: #f00">
                    Good Morning !
                </div>
            </td>
        </tr>
    </tbody>
</table>

if you set style="height:100px;" on a td if the td has content that grows the cell more than that, it will do so no need for min height on a td.