Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Min-width and max-height for table attributes

Tags:

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

My problem now is that the browser doesn't take it. If I define it on td it gets ignored, if I define it in an div element inside a td element, the content has the right min and max width, but the table still has the same size. (so there is a lot of free space :/)

How can I resolve this?

EDIT: I just noticed that the problem seems to only occur when the table is in fullscreen mode. Nevertheless, an element shouldn't have more than the max-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> 
like image 374
Stefan Avatar asked Jun 21 '11 14:06

Stefan


People also ask

How do you specify max width and minimum width?

Combining media query expressions Max-width and min-width can be used together to target a specific range of screen sizes. @media only screen and (max-width: 600px) and (min-width: 400px) {...} The query above will trigger only for screens that are 600-400px wide.

Which attribute is used to set the table height and width?

The attributes used to set the background color, Table border, and Table width and height are bgcolor attribute, border attribute, width, and height attributes.

How do you set the minimum width of a table?

var columns = [ {label: 'Column 1', width: 80 /* plus other column config */}, {label: 'Column 2', minWidth: 110 /* plus other column config */}, {label: 'Column 3' /* plus other column config */}, ]; const minimumTableWidth = columns. reduce((sum, column) => { return sum + (column.

How do you set the maximum width of a table?

If you want to make your max-width to work, you need to set the CSS property table-layout: fixed; on the table and use width , not max-width . Show activity on this post. Add the following rule your css section. Show activity on this post.


2 Answers

For table cells the 'width' property should be used, as the 'min-width' and 'max-width' is undefined for table cells. See the specification:

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

To enforce the width, you may try to change the table-layout property to "fixed". The specification describes the algorithm pretty clearly.

like image 169
Arsen7 Avatar answered Oct 17 '22 13:10

Arsen7


To force min-height attribute for td you also can put invisible image in td, or wrap you td into div. Example for first case:

<td><img style="float:left;min-height:50px;visibility:hidden;width:0px;">12345</td> 
like image 40
macloving Avatar answered Oct 17 '22 12:10

macloving