Ho una tabella che visualizza alcune informazioni relative al periodo di tempo di un evento e che le informazioni specifiche si trovano in una tabella nidificata.<td> non rispettare gli attributi `width` o` max-width`?
Ecco uno screenshot:
Ecco la <td> che contiene la tabella nidificata (si prega di ignorare LA LOGICA 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>
Sul tavolo nidificato, ho il seguente stile:
style="width: 100%; table-layout: fixed; white-space: nowrap;"
Su ogni cella di sinistra (ad es. "? Tutto il giorno", "Start Time", "fine") Ho il seguente stile:
style="max-width: 81px; width: 81px;"
Se non è ovvio, nessuna delle celle della tabella annidata stanno seguendo il mio stile. È un po 'frustrante, dal momento che non ero nemmeno consapevole che i tavoli potessero trasformarsi in un pasticcio così ridicolmente disordinato.
Come posso forzare tutte le celle di dati della tabella nella tabella nidificata per allineare correttamente?