21

I am trying to build a html table but I want to force all rows to have the same height (no matter how much content is in the cells). If a cell overruns the space, I want it to just cut off the text and hide the rest.

Is this possible using CSS, etc?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
leora
  • 188,729
  • 360
  • 878
  • 1,366
  • Might be naive, but simple setting of `table td {height:100px;}` doesn't work? – Damb Apr 15 '11 at 00:11
  • 1
    A small follow up question. Is it possible to have a table where all rows have the same height, but the height is automatically calculated? In other words, all rows are as tall as the tallest row needs to be to accommodate its content? – Mark Green Aug 17 '18 at 15:19

4 Answers4

11

IE only

    #fixedheight {
        table-layout: fixed;
    }
    
    #fixedheight td {
        height: 20px;
        overflow: hidden;
        width: 25%;
    }
    <table id="fixedheight">
        <tbody>
            <tr>
                <td>content</td>
                <td>lots of content that should spend way more time wrapping down than it should if I were just to have a short bit of stuff, that would be invaded by zombies and the such</td>
                <td>more content</td>
                <td>small content</td>
                <td>enough already</td>
            </tr>
        </tbody>
    </table>

Universal solution

    #fixedheight {
        table-layout: fixed;
    }
    
    #fixedheight td {
        width: 25%;
    }
    
    #fixedheight td div {
        height: 20px;
        overflow: hidden;
    }
    
    <table id="fixedheight">
        <tbody>
            <tr>
                <td>
                    <div>content</div>
                </td>
                <td>
                    <div>lots of content that should spend way more time wrapping down than it should if I were just to have a short bit of stuff, that would be invaded by zombies and the such</div>
                </td>
                <td>
                   <div>more content</div>
                </td>
                <td>
                   <div>small content</div>
                </td>
                <td>
                   <div>enough already</div>
                </td>
            </tr>
        </tbody>
    <table>
ATP
  • 2,939
  • 4
  • 13
  • 34
ohmusama
  • 4,159
  • 5
  • 24
  • 44
  • i tried this but it doesn't seem to make it smaller in height than what fits with the content. een if height: 1px. if there are 3 rows of data (after wrapping), it still shows all 3 rows. it seems that overflow:hidden doesn't seem to be taken affect. i am using firefox – leora Apr 15 '11 at 01:41
  • I did a bunch of research and there is a solution in IE, but not for other browsers. I've updated the example with IE compliment code and universal code. – ohmusama Apr 15 '11 at 02:38
3

Set the CSS height property to what you want the cell heights to be, and use overflow: hidden (see CSS overflow) to prevent contents from expanding the cells.

Henry Merriam
  • 834
  • 6
  • 20
2

Give the table a class:

<table class="myTable">...</table>

And in the CSS, try the following:

table.myTable td {
  height: 20px;
  overflow: hidden;
}
Alp
  • 29,274
  • 27
  • 120
  • 198
  • @ohmusama - i tried this but it doesn't seem to make it smaller in height than what fits with the content. een if height: 1px. if there are 3 rows of data (after wrapping), it still shows all 3 rows. it seems that overflow:hidden doesn't seem to be taken affect. i am using firefox . .any ideas?? – leora Apr 15 '11 at 01:41
  • I found this: http://stackoverflow.com/questions/1554928/how-to-hide-table-row-overflow – Alp Apr 15 '11 at 02:53
1

The CSS Styles you will want to set are: display:block, min-height, and max-height.

    <!DOCTYPE html>
      <html>
        <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width">
          <title>JS Bin</title>
          <style>
            html{font-size:16px;}
            table{}
            table tr{
              display:block;
              border-bottom:solid green 1px;    
              height:.8em;
              min-height:.8em;
              max-height:.8em;
              background-color:#E300E3;
              overflow:hidden;
           }
         </style>
       </head>
       <body>
         <table id="MyTable">
           <tr><td>16px Font-Size</td><td>Column2</td></tr>
         </table>
       </body>
     </html>
alignedfibers
  • 195
  • 1
  • 11