ASP.Netテーブルの幅が正しく表示されない

Question

編集：誰かがこのソリューションを探している場合は、正しいとマークされた答えのコメントを確認してください。 divタグとインラインブロックを使用すると、すべてが正しく表示されます。

私は利用可能な領域の60％を占めるようにテーブルを取得しようとしています。何も表示されているものを変更するようなものはありません...テーブル行は、利用可能な領域の100％（またはそれ以上）を占めており、要素を次の行にラップしません。すべてのデータが正しいです、フォーマットはちょうどかかりません。

私は幅が尊重されていない理由を理解できる人は誰ですか？

CSS：

/*#region project-data */ 

.project-data { 
    width: 60%; 
} 

.project-alert { 
    padding: 3px; 
    text-align: center; 
    width: 200px; 
    border: 2px solid #999; 
} 

.project-alert th { 
    text-align: center; 
} 

.al-text { 
} 

.info-bar { 
    height: 8px; 
} 

.last-reported { 
    font-style: italic; 
    font-size: small; 
} 

.al-time { 
    font-size: small; 
} 

/*#endregion */ 

部分図：

<table class="project-data"> 
    <tr> 
     @foreach (var item in Model) 
     { 
      <td> 
       <table class="project-alert"> 
        <thead> 
         <tr> 
          <th> 
           @item.TypeText 
          </th> 
         </tr> 
        </thead> 
        <tbody> 
         <tr><td class="al-text">@item.AlertText</td></tr> 
         <tr><td class="info-bar" style="background-color:@item.InfoBar"></td></tr> 
         <tr><td class="last-reported">Last Reported</td></tr> 
         <tr><td class="al-time">@item.AlertTime</td></tr> 
        </tbody> 
       </table> 
      </td> 
     } 
    </tr> 
</table> 

Answer 1

幅は、あなたのケースで尊敬されていない理由は、あなたがnested tablesを持っているということです。あなたは、単純な構造テーブルはあなたが与えるしようとしている幅にどのように応答するかを確認するには、このJSFiddleを参照することができ

<table class="project-data"> 
    <tbody> 
    @foreach (var item in Model) 
    { 
       <tr>      
        <td> @item.TypeText <td>       
       </tr>     

        <tr><td class="al-text">@item.AlertText</td></tr> 
        <tr><td class="info-bar" style="background-color:@item.InfoBar"></td></tr> 
        <tr><td class="last-reported">Last Reported</td></tr> 
        <tr><td class="al-time">@item.AlertTime</td></tr> 


    } 
    </tbody> 
</table> 

：だけのような単純なものにあなたのhtmlを変更します。