Kehlan Krumme Kehlan Krumme - 4 years ago 93
CSS Question

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

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:

Nested Table

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?

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download