Question

I have a table that will display the name of camera and its model. The problem is when a name/model string is too long the cell gets resized and therefore makes the table body out of sync with the head.

<td>
    <div class="camera_details">
        <div class="camera_models">XXXCAMERAMODELXXX</div>
        <div class="camera_name">XXXCAMERANAMEXXX</div>
    </div>
</td>

This has CSS like so:

td{
    max-width: 144px;
}
.camera_details {
    max-width: 144px;
}
.camera_models {
    text-overflow: ellipsis;
    overflow: hidden;
}
.camera_name {
    text-overflow: ellipsis;
    overflow: hidden;
}
table {
    table-layout: fixed;
}

The problem only exists on IE8 where the div get restricted due to max-width but the td element doesn’t which still causes misalignment in the table.

Is the a way I can force the td to be a certain width regardless of the width of the children divs?

Answer 1

Define table-layout:fixed; in your table. Write like this:

table{
 table-layout:fixed;
}