html - style - <td> no obedeciendo los atributos `width` o` max-width`?

img tag border

Question

Tengo una tabla que muestra información sobre el intervalo de tiempo de un evento y esa información específica está en una tabla anidada.

Aquí hay una captura de pantalla:

Aquí está el <td> que contiene la tabla anidada (POR FAVOR IGNORE THE 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>

En la tabla anidada, tengo el siguiente estilo:

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

En cada celda de la izquierda (es decir, "¿Todo el día?", "Hora de inicio", "Hora de finalización"), tengo el siguiente estilo:

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

Si no es obvio, ninguna de las celdas de la tabla anidada está siguiendo mi estilo. Es un poco frustrante, ya que ni siquiera era consciente de que las tablas podrían convertirse en un desastre tan ridículamente descuidado.

¿Cómo puedo forzar todas las celdas de datos de la tabla en la tabla anidada para que se alineen correctamente?

Answer 1

Necesitas usar display:table-row; en lugar de display:block; en tus etiquetas <tr> .

Alternativamente, puede alternar una clase con display:none; en lugar de alternar el valor de display .