tabla HTML ancho total con el margen

lo tanto, tengo una tabla:tabla HTML ancho total con el margen

<table border=1> 
    <caption>This is a table.</caption> 
    <tr> 
     <th>One</th> 
     <th>Two</th> 
     <th>Three</th> 
    </tr> 
    <tr> 
     <td>Four</td> 
     <td>Five</td> 
     <td>Six</td> 
    </tr> 
</table>

y yo quiero que sea lo más amplia posible al mismo tiempo dejando un margen de 20 píxeles en cada lado. Así pues, hice esto:

table{ 
    border-collapse:collapse; 
    margin:20px; 
    padding:0; 
    width:100%; 
}

pero termina siendo el ancho de la matriz más un margen adicional de 20 píxeles a la izquierda, haciendo que aparezca una barra de desplazamiento vertical. ¿Hay alguna forma de hacerlo 40px menos que el ancho de los padres sin agregar otro elemento para rodearlo?

jsFiddle: http://jsfiddle.net/pvHNM/

Fuente

2012-01-11 John Stimac

posible duplicado de [Div anchura 100% menos cantidad fija de píxeles] (http://stackoverflow.com/questions/651317/div-width-100-minus-fixed-amount-of-pixels) – Gajus

uso calc() para calcular el ancho previsto:

table { 
    margin: auto; 
    width: calc(100% - 40px); 
}

http://jsfiddle.net/EXS76/1/

Fuente

2014-07-23 19:03:36 Michael

Es fácil olvidar que ahora está bien utilizar algunas de estas nuevas funciones. http://caniuse.com/#search=calc –

@MichaelCordingley estuvo de acuerdo, parece raro combinar una nueva función de CSS con la vieja escuela

– Michael

Por reglas CSS, la propiedad width establece el ancho del contenido de un elemento, por lo que están requiriendo que el 100% de la anchura disponible se asignará a la propia tabla y alguna adicional espacio asignado para los márgenes. Esto inevitablemente causa desplazamiento horizontal.

Como solución alternativa, puede envolver la tabla dentro de un elemento div y establecer margin en él.

Fuente

2012-01-11 01:08:53

Puede establecer un relleno en el elemento de tabla. El thead, tbody y tfoot y las filas dentro llenarán el espacio en la mesa.

table 
{ 
    border-collapse:collapse; 
    padding:20px; 
    margin:0; 
    width:100%; 
}

Fuente

2013-02-27 12:35:13 Victor

inteligente e inteligente –

Parece que esto no funciona (¿más?): https://jsfiddle.net/kvpupvo8/1/ – BurninLeo

He encontrado la mejor respuesta útil, pero no funciona en los navegadores antiguos. Lo que más me convenía era un DIV fuera de la mesa que establecía el margen. Entonces, el ancho del 100% del padre estaría influenciado por este div, no el elemento padre.

<div style="margin"> 
    <table style="width:100%"> 
    </table> 
</div>

Fuente

2015-04-14 17:32:32 LucasJohn

-1

¿Cómo sobre el uso de una cuña para que la tabla se extiende a todo lo ancho del contenedor como un div haría, no está seguro acerca de la compatibilidad?

table:after { 
    content: "i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i"; 
    display: block; 
    height: 0em; 
    visibility: hidden; 
}

Fuente

2016-03-02 06:11:29

Cuestiones relacionadas

tabla HTML ancho total con el margen

Respuesta

Cuestiones relacionadas