Set height of rows in fixed table layout table

Question

I fail to set the height of my table with fixed table layout. Any way to achieve this?

CSS

  table#mytable {
        display: table;
        table-layout: fixed;
        width: 100%;
    }

    table#mytable tr {
        max-height:20px;    
    }


    table#mytable tr td {
        max-height:20px;    
    }

HTML

<table id="mytable">
    <tr>
        <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td>
        <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td>
        <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td>
        <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td>
    </tr>
</table>

Also see https://jsfiddle.net/e6ygojnL/

you have to add `!important` – Amit singh Sep 01 '15 at 09:31 — Amit singh, Sep 01 '15 at 09:31

score 2 · Accepted Answer · edited May 23 '17 at 10:26

2

I guess you can refer to the below link for the answer to your question:

How to set maximum height for table-cell?

You need to place a div inside td's, and give them a max height and overflow, because by default, td's are meant to expand to accommodate the content within them.

edited May 23 '17 at 10:26

Community

1
1

answered Sep 01 '15 at 09:41

ShivangiBilora

2,912
4
20
27

Even better, don't use a table unless your content absolutely demands it. – John Halbert Sep 01 '15 at 09:43
Its better to add comment if you're making suggestions, as you've referred another SO que for the answer. – vivekkupadhyay Sep 01 '15 at 09:49
1

@vivekkupadhyay: Sure. I'll do it from next time. I have not been using SO much, so I didn't knew. Thanks. Will keep it in mind. – ShivangiBilora Sep 01 '15 at 09:50

Set height of rows in fixed table layout table

1 Answers1