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>
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.
The attributes used to set the background color, Table border, and Table width and height are bgcolor attribute, border attribute, width, and height attributes.
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.
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.
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.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With