How can I force all rows in a table to have the same height

css, css-tables, html

Solution

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>

Problem

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?

Original source

Related problems