ASP.Net-Tabellenbreite wird nicht korrekt angezeigt

Question

EDIT: Wenn jemand anderes nach dieser Lösung sucht, überprüfen Sie die Kommentare unter der als richtig markierten Antwort. Mit div Tags und Inline-Block wurde alles korrekt angezeigt.

Ich versuche einen Tisch zu bekommen, der 60% des verfügbaren Platzes einnimmt. Nichts scheint zu ändern, was angezeigt wird ... Die Tabellenzeile belegt 100% (oder mehr) des verfügbaren Speicherplatzes und umschließt die Elemente nicht in der nächsten Zeile. Alle Daten sind korrekt, die Formatierung wird einfach nicht durchgeführt.

Kann mir jemand helfen, herauszufinden, warum die Breite nicht eingehalten wird?

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 */ 

Teilansicht:

<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

Der Grund, warum die Breite nicht in Ihrem Fall eingehalten wird, ist, dass Sie nested tables haben. Ändern Sie einfach Ihre HTML zu etwas Einfaches wie:

<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> 

Sie auf diese JSFiddle beziehen kann, um zu sehen, wie eine einfache Strukturtabelle auf die Breite reagieren Sie zu geben versuchen.