tabella HTML larghezza con un margine

Quindi, ho una tabella:tabella HTML larghezza con un margine

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

e voglio che sia il più ampio possibile, pur lasciando un margine di 20px su ogni lato. Così, ho fatto questo:

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

ma finisce per essere la larghezza del genitore più un margine di 20px in più a sinistra, facendolo apparire una barra di scorrimento verticale. C'è un modo per renderlo 40px inferiore alla larghezza del genitore senza aggiungere un altro elemento per circondarlo?

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

fonte

2012-01-11 John Stimac

possibile duplicato [Div larghezza 100% meno quantità fissa di pixel] (http://stackoverflow.com/questions/651317/div-width-100-minus-fixed-amount-of-pixels) – Gajus

uso calc() per calcolare la larghezza prevista:

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

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

fonte

2014-07-23 19:03:36 Michael

È facile dimenticare che ora è OK utilizzare alcune di queste nuove funzionalità. http://caniuse.com/#search=calc –

@MichaelCordingley ha accettato, sembra strano combinare una nuova funzionalità CSS con la vecchia scuola

– Michael

Con regole CSS, la proprietà width imposta la larghezza del contenuto di un elemento, in modo da stanno richiedendo che il 100% della larghezza disponibile da destinare al tavolo stesso e qualche ulteriore spazio essere assegnato per i margini. Ciò causa inevitabilmente uno scrolling orizzontale.

Come soluzione temporanea, è possibile avvolgere il tavolo all'interno di un elemento div e impostare margin su di esso.

fonte

2012-01-11 01:08:53

È possibile impostare un riempimento sull'elemento tabella. Il thead, tbody e tfoot e le righe all'interno riempiranno lo spazio nel tavolo.

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

fonte

2013-02-27 12:35:13 Victor

intelligente e intelligente –

Sembra che questo non funzioni (altro?): https://jsfiddle.net/kvpupvo8/1/ – BurninLeo

ho trovato la migliore risposta utile, ma non funziona nei browser più vecchi. Quello che più mi conviene è stato un DIV fuori dal tavolo che ha stabilito il margine. Quindi, la larghezza del 100% del genitore sarebbe influenzata da questo div, non dall'elemento genitore.

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

fonte

2015-04-14 17:32:32 LucasJohn

-1

ne dite di usare uno spessore in modo che la tabella si estende per l'intera larghezza del contenitore come un div sarebbe, non sono sicuro di compatibilità?

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

fonte

2016-03-02 06:11:29

tabella HTML larghezza con un margine

risposta

Problemi correlati