I have a table, fixed column widths (fixed by %) and with a whole bunch of text fields inside. I want the fields to all be equal widths and just as long as my labels (in the first column) all stay on the same line everything works great. The moment the first column forces on of the labels to word wrap all the input fields in that row resize as well and no longer fit in the table cells. Is there a way to fix this?

This is a problem with IE 7 (IE 8/Firefox works fine, haven't tried on anything below IE 7).

My code is below (nothing else on the page) and a test page is here: http://s88320.gridserver.com/table.html

<table cellpadding="5" style='width:100%'>
        <tr style='background-color: #FFFF00; text-align: center; font-size: x-small;'>
            <td style='width:20%'>
            </td>
            <td style='width:10%'>

            </td>
            <td style='width:10%'>

            </td>
            <td style='width:10%'>

            </td>
            <td style='width:10%'>

            </td>
            <td style='width:10%'>

            </td>
            <td style='width:10%'>

            </td>
            <td style='width:10%'>

            </td>
            <td style='width:10%'>
                Totals
            </td>
        </tr>
        <tr>
            <td>
                Exchange Rate
            </td>
            <td>
                <input type="text" style="width:100%;" />
            </td>
            <td>
                <input type="text" style="width:100%;" />
            </td>
            <td>
                <input type="text" style="width:100%;" />
            </td>
            <td>
                <input type="text" style="width:100%;" />
            </td>
            <td>
                <input type="text" style="width:100%;" />
            </td>
            <td>
                <input type="text" style="width:100%;" />
            </td>
            <td>
                <input type="text" style="width:100%;" />
            </td>
            <td>

            </td>
        </tr>
        <tr>
            <td>
                Auto-Parking/Tolls
            </td>
            <td>
                <input type="text" style="width:100%;" />
            </td>
            <td>
                <input type="text" style="width:100%;" />
            </td>
            <td>
                <input type="text" style="width:100%;" />
            </td>
            <td>
                <input type="text" style="width:100%;" />
            </td>
            <td>
                <input type="text" style="width:100%;" />
            </td>
            <td>
                <input type="text" style="width:100%;" />
            </td>
            <td>
                <input type="text" style="width:100%;" />
            </td>
            <td>

            </td>
        </tr>
        <tr>
            <td>
                Taxi & Local Transportation 
            </td>
            <td>
                <input type="text" style="width:100%;" />
            </td>
            <td>
                <input type="text" style="width:100%;" />
            </td>
            <td>
                <input type="text" style="width:100%;" />
            </td>
            <td>
                <input type="text" style="width:100%;" />
            </td>
            <td>
                <input type="text" style="width:100%;" />
            </td>
            <td>
                <input type="text" style="width:100%;" />
            </td>
            <td>
                <input type="text" style="width:100%;" />
            </td>
            <td>

            </td>
        </tr>
    </table>

1 answer

Jordan 469
0
points

Within the <td> itself try adding:

<td style="white-space: nowrap;">lorem ipsum</td>

In a stylesheet, something like:

table td {white-space: nowrap;}

The above would apply to all <td> tags.

Answered over 6 years ago by Jordan