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

Question

I have a table that displays some information about the time interval of the event, and this information is in a nested table.

Here is a screenshot:

Here is the <td> that contains the nested table (PLEASE IGNORE 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=" [e-mail] " style="width: 160px;">@(item.AllDay.HasValue && item.AllDay.Value == true ? "Yes" : "No")</td> </tr> @*Should display StartTime & EndTime if AllDay == true??*@ <tr id=" [e-mail] " 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=" [e-mail] " style="width: 160px;">@item.StartTime</td> </tr> <tr id=" [e-mail] " 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=" [e-mail] " 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;" 

In each left cell (i.e., “All day?”, “Start time”, “End time”), I have the following style:

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

If this is not obvious, none of the nested cells in the table match my style. This is a little disappointing since I didn’t even know that tables could turn into such a ridiculously messy mess.

How can I force all table data cells in a nested table to align correctly?

Answer 1

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

Alternatively, you can switch the class using display:none; instead of switching the display value.