2013-07-10 5 views
7

私はイベントのタイムスパンに関するいくつかの情報を表示し、その特定の情報がネストしたテーブルにあるテーブルを持っています。ここで​​'width`または `max-width`属性に従わないのですか?

はスクリーンショットです:ここでは

Nested Table

が入れ子になったテーブルが含まれてい<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="[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

<tr>タグにdisplay:block;の代わりにdisplay:table-row;を使用する必要があります。

また、を使用して、displayの値を切り替える代わりに、クラスを切り替えることもできます。

関連する問題