2013-07-10 54 views
7

我有一个表格显示有关事件的时间跨度的一些信息,并且该特定信息位于嵌套表格中。​​不服从`width`或`max-width`属性?

以下是截图:

Nested Table

这里是包含嵌套表<td>(请忽略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> 

在嵌套表,我有以下款式:

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

对每个左手细胞(即?“全天”,“开始时间”,“结束时间”)我有以下样式:

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

如果不是很明显,没有一个嵌套表格的单元格的跟随我的风格。这有点令人沮丧,因为我甚至没有意识到桌子可能会变成如此荒谬的混乱。

我该如何才能强制嵌套表中的所有表格数据单元正确对齐?

回答

22

您需要使用display:table-row;而不是display:block;<tr>标签。

或者,您可以使用display:none;切换类,而不是切换display值。