Best IT Recipes

Minimum width and maximum height for table attributes

I have a table and I want to define the min-width and max-height properties. See the example below.

My problem now is that the browser is not accepting it. If I define it on td , it is ignored, if I define it on the div element inside the td element, the contents have minimum and minimum width, but the table still has the same size. (therefore there is a lot of free space: /)

How can i solve this?

EDIT: I just noticed that the problem only occurs when the table is in full screen. However, the element should have no more maximum width than!

Example:

 <html> <head> <style type="text/css"> td { border: 1px solid black; } html,body,.fullheight { height: 100%; width: 100%; } .minfield { max-width: 10px; border: 1px solid red; overflow: hidden; } </style> </head> <body> <table class="fullheight"> <tr> <td class="minfield"> <div class="minfield"> <p>hallo</p> </div> </td> <td><p>welt</p></td> </tr> </table> </body> </html>
+15
html css html-table table
Jun 21 2018-11-21T00:
source share
3 answers

For table cells, use the width property, since "min-width" and "max-width" are undefined for table cells. See specification :

"In CSS 2.1, the effects of" min-width "and" max-width "on tables, inline tables, table cells, column columns, and column groups are undefined."

To apply the width, you can try changing the table-layout property to "fixed". The specification describes the algorithm quite clearly.

+29
Jun 21 2018-11-11T00:
source share
— -

To force the min-height attribute on td, you can also put an invisible image in td or wrap td in a div. An example for the first case:

 <td><img style="float:left;min-height:50px;visibility:hidden;width:0px;">12345</td>
+5
May 21 '13 at 12:46
source share

I do not see a problem with setting the minimum width for tables and cells. See jsFiddle .

HTML:

 <table style="border:solid 1px #000;"> <tr> <td id="cell-one" style="border:solid 1px #000;"> test 1 </td> <td style="border:solid 1px #000;"> test 2 </td> </tr> </table>

and CSS:

 table{width: 90%;} td#cell-one{min-width: 20%;}

Remember that the width of min depends on the width (or max-width). max-width overrides width, and min-width is the width or maximum width. In other words, be sure to set the width property on the parent you apply min-width to: jsFiddle

-2
Feb 02 '13 at 8:55
source share


More articles:


All Articles