<td> not obeying `width` or `max-width` attributes?

Question

I have a table that displays some information regarding the timespan of an event, and that specific info is in a nested table.

Here's a screenshot:

Here is the

<td>

that contains the nested table (PLEASE IGNORE THE RAZOR LOGIC):

<td>

    <table class="centered" style="width: 100%; table-layout: fixed; white-space: nowrap;">

        <tbody>

            <tr>

                <td class="left-text" style="max-width: 81px; width: 81px;"><b>All Day?</b></td>

                <td id="AllDay-@item.ExternalID" style="width: 160px;">@(item.AllDay.HasValue && item.AllDay.Value == true ? "Yes" : "No")</td>

            </tr>

            @*Should display StartTime & EndTime if AllDay == true??*@

            <tr id="StartTime-@item.ExternalID" style="display: @(item.AllDay.HasValue && item.AllDay.Value == true ? "none" : "block")">

                <td class="left-text" style="max-width: 81px; width: 81px;"><b>Start Time</b></td>

                <td id="StartTime-@item.ExternalID" style="width: 160px;">@item.StartTime</td>

            </tr>

            <tr id="EndTime-@item.ExternalID" style="display: @(item.AllDay.HasValue && item.AllDay.Value == true ? "none" : "block")">

                <td class="left-text" style="max-width: 81px; width: 81px;"><b>End Time</b></td>

                <td id="EndTime-@item.ExternalID" style="width: 160px;">@item.EndTime</td>

            </tr>

        </tbody>

    </table>

</td>

On the nested table, I have the following style:

style="width: 100%; table-layout: fixed; white-space: nowrap;"

On each left-hand cell (i.e. "All Day?", "Start Time", "End Time") I have the following style:

style="max-width: 81px; width: 81px;"

If it's not obvious, none of the nested table's cells are following my style. It's a bit frustrating, since I wasn't even aware that tables could turn into such a ridiculously sloppy mess.

How can I force all the table data cells in the nested table to align properly?

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

You need to use display:table-row; instead of display:block; on your <tr> tags.

Alternatively, you could toggle a class with display:none; instead of toggling the display value.

<td> not obeying `width` or `max-width` attributes?

Sign up