Min-Width and Max-Height for Table Attributes

table, tr, td, th {  border: 1px solid black;  white-space: normal;}
table tr td:nth-child(1) {  background-color: red;}
table {  /*table-layout: fixed;  width: 140%;*/  margin-left: 20px;}
th > div, td > div {  max-width: 100px;  min-width: 50px;  word-wrap: break-word;  overflow-wrap: break-word;}

<div name="tables">  <table>    <tr>      <th><div>No Seq</div></th>      <th><div>Department</div></th>      <th><div>Person in Charge</div></th>      <th><div>Project Title</div></th>      <th><div>Objectives</div></th>      <th><div>How To Do</div></th>      <th><div>Activities</div></th>      <th><div>Project Started</div></th>      <th><div>Project Completed</div></th>      <th><div>Target Cost Saving(RM)/Year</div></th>      <th><div>Cost Saving After Justification</div></th>      <th><div>Cost Saving Monthly</div></th>    </tr>
    <tr id="row1">      <td><div> 1</div></td>      <td id="department_row1"><div> some text </div></td>      <td id="pic_row1"><div> some rather long text </div></td>      <td id="protitle_row1"><div> text </div></td>      <td id="objective_row1"><div> text </div></td>      <td id="howtodo_row1"><div> text </div></td>      <td id="activities_row1"><div> text </div></td>      <td id="prostart_row1"><div> text </div></td>      <td id="procompl_row1"><div> text </div></td>      <td id="targetcost_row1"><div> text </div></td>      <td id="costafter_row1"><div> text </div></td>      <td id="costmonthly_row1"><div> text </div></td>    </tr>  </table></div>

Setting a max height on a table

NOTE this answer is now incorrect. I may get back to it at a later time.

As others have pointed out, you can't set the height of a table unless you set its display to block, but then you get a scrolling header. So what you're looking for is to set the height and display:block on the tbody alone:

<table style="border: 1px solid red">
    <thead>
        <tr>
            <td>Header stays put, no scrolling</td>
        </tr>
    </thead>
    <tbody style="display: block; border: 1px solid green; height: 30px; overflow-y: scroll">
        <tr>
            <td>cell 1/1</td>
            <td>cell 1/2</td>
        </tr>
        <tr>
            <td>cell 2/1</td>
            <td>cell 2/2</td>
        </tr>
        <tr>
            <td>cell 3/1</td>
            <td>cell 3/2</td>
        </tr>
    </tbody>
</table>

Here's the fiddle.

Min-width and max-width for td

You can use css3 flexbox and add css min-width and max-width.

https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_flexible_boxes

Why does max-width behave like a minimum width in a table cell?

As others have noted, the behavior of max-width on table cells is not defined by the standard. That said, current* browsers all give the exact same counter-intuitive results, so there has to be a common algorithm to handle this case (at least for now).

^{* only the very newest version of MSIE/Edge (but what else is new...)}

Looking at it more closely, the mention of minimum widths is misleading; max-width actually does limit the maximum width. So why is the observed width of the column larger than the specified value?

Because it is applied before the specified table width is taken into account.

In a table with only one row and two cells, one of which has max-width, overflow:hidden and text-overflow:ellipsis set, the column widths are calculated first without any restrictions on the total width. After that, the cells are stretched to the specified table width, keeping their proportions from the first calculation step.

This test page shows the effect with and without table width restrictions, and for various text content lengths: http://output.jsbin.com/hebixu

To get a more predictable result in tables with a set width, the other cells can be given an explicit width. Then again, if the optimal widths are known beforehand, we can just use table-layout:fixed.

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

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 ...

Related Topics