我有一个表格显示有关事件时间跨度的一些信息,并且该特定信息位于嵌套表格中。
截图如下:
这是 <td>
包含嵌套表(请忽略 RAZOR 逻辑):
<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>
在嵌套表上,我有以下样式:
style="width: 100%; table-layout: fixed; white-space: nowrap;"
在每个左侧单元格(即“全天?”、“开始时间”、“结束时间”)上,我有以下样式:
style="max-width: 81px; width: 81px;"
如果不是很明显,嵌套表格的单元格都没有遵循我的风格。这有点令人沮丧,因为我什至没有意识到表格会变得如此可笑的乱七八糟。
如何强制嵌套表格中的所有表格数据单元格正确对齐?
最佳答案
您需要使用 display:table-row;
而不是 display:block;
在你的 <tr>
标签。
或者,您可以使用 display:none;
切换一个类而不是切换 display
值(value)。
关于html - <td> 不遵守 `width` 或 `max-width` 属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17577851/