Menu
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="[email protected]" style="width: 160px;">@(item.AllDay.HasValue && item.AllDay.Value == true ? "Yes" : "No")</td>
</tr>
@*Should display StartTime & EndTime if AllDay == true??*@
<tr id="[email protected]" 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="[email protected]" style="width: 160px;">@item.StartTime</td>
</tr>
<tr id="[email protected]" 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="[email protected]" 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?
273
By using CSS, the styling of HTML elements is easy to modify. To fix the width of td tag the nth-child CSS is used to set the property of specific columns(determined by the value of n) in each row of the table.
To set the cell width and height, use the CSS style. The height and width attribute of the <td> cell isn't supported in HTML5. Use the CSS property width and height to set the width and height of the cell respectively. Just keep in mind, the usage of style attribute overrides any style set globally.
You can use #images tr td{display:inline-block;} for FireFox.
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.
188
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
