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

Question

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?

Answer 1

IE only

CSS:

#fixedheight {
    table-layout: fixed;
}

#fixedheight td {
    height: 20px;
    overflow: hidden;
    width: 25%;
}

HTML:

<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

CSS:

#fixedheight {
    table-layout: fixed;
}

#fixedheight td {
    width: 25%;
}

#fixedheight td div {
    height: 20px;
    overflow: hidden;
}

HTML:

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