Chrome, Safari ignorando el ancho máximo en la tabla

Sé que esto ha sido respondido por un tiempo y con una solución de trabajo, pero la respuesta que indica que max-width solo se aplica a los elementos de bloque y cita una fuente que no es la especificación es completamente incorrecta.

La especificación (la especificación CSS 3 para el tamaño intrínseco y extrínseco de CSS se refiere a la especificación CSS 2.1 de esta regla) establece claramente:

Todos los elementos, excepto los elementos en línea no reemplazados, filas de tabla y grupos de filas

Lo que significaría que debería aplicar a elementos de tabla.

Significa que el comportamiento de WebKit de no honrar max-width o min-width en los elementos de la tabla es incorrecto.

Creo que lo que estás buscando aquí es:

table-layout: fixed

Aplique este estilo a la tabla y su tabla respetará el ancho que le asigne.

Nota: Aplicar este estilo directamente en Chrome parecerá que no está funcionando. Debe aplicar el estilo en su archivo CSS / HTML y actualizar la página.

Envuelva la tabla interna con div y establezca max-width a este div de envoltura.

Tuve el mismo problema. Utilicé una tabla como un medio para centrar mi contenido en la página, pero safari ignoró width:100%; max-width:1200px como un estilo que apliqué a la tabla. Aprendí que si envuelvo la tabla en un div y establezco los márgenes izquierdo y derecho en auto en el div, se centraría en la página y obedecería los atributos de ancho máximo y mínimo en safari y firefox en el mac. Todavía tengo que comprobar explorer o chrome en Windows. He aquí un ejemplo:

<div style="position:relative; width:100%; max-width:1200px; min-width:800px; margin-left:auto; margin-right:auto">

Luego anidé la tabla dentro del div...

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">

Acabo de encontrar esta respuesta y vale la pena señalar que de acuerdo con MDN ( https://developer.mozilla.org/en-US/docs/Web/CSS/max-width ), su tabla de compatibilidad para max-width dice:

|             Feature  | Chrome        | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
--------------------------------------------------------------------------------------------------------
|applies to <table> [1]| Not supported | (Yes)           | Not supported     | (Yes) | Not supported   |

"[1] CSS 2.1 deja explícitamente el comportamiento de max-width como indefinido. Por lo tanto, cualquier comportamiento es compatible con CSS2.1; las especificaciones CSS más recientes pueden definir este comportamiento, por lo que los desarrolladores web no deberían confiar en uno específico ahora."

Aunque hay algunas cosas interesantes en MDN como "fill-available" y "fit-content", tenemos algunas cosas que esperar cuando la especificación se estabilice y sea explícita en este frente...

Pude solucionar mi problema con media query:

Sustituí

max-width: 360px

Con

@media (min-width: 440px) {
    width: 360px;
}

Aquí hay una referencia inequívoca: 10 Detalles del modelo de formato visual (w3.org)

En CSS 2.1, el efecto de 'min-width' y 'max-width' en tablas, tablas en línea, celdas de tabla, columnas de tabla y grupos de columnas es indefinido.

Las referencias dadas anteriormente en este hilo, se leen erróneamente "filas de tabla" como "tabla". Este sin embargo, realmente dice "mesa". Eso es parte de CSS2, pero CSS3 se refiere a CSS2 para la base de max-width.

Así que es simplemente indefinido y el navegador son libres de hacer lo que deseen y es inseguro confiar en él.