Utilizzo di calc() con tabelle

Question

Sto cercando di ottenere un tavolo con larghezza fissa td se larghezza variabile td s.

Sto usando la funzione CSS calc(), ma in qualche modo sembra che non sia possibile utilizzare % nelle tabelle.

In modo che è quello che ho finora:

<table border="0" style="width:100%;border-collapse:collapse;"> 
    <tr style="width:100%"> 
     <td style="width:30px;">1</td> <!--Fixed width--> 
     <td style="width: calc((100% - 230px)/100 * 40);">Title</td> <!--Width should be 40% of the remaining space--> 
     <td style="width: calc((100% - 230px)/100 * 40);">Interpret</td> <!--Width should be 40% of the remaining space--> 
     <td style="width: calc((100% - 230px)/100 * 20);">Album</td> <!--Width should be 20% of the remaining space--> 
     <td style="width:80px;">Year</td><!--Fixed width--> 
     <td style="width:180px;">YouTube</td><!--Fixed width--> 
    </tr> 
</table> 

come la vedo io, dovrebbe funzionare, ma non è.

Qualcuno sa come risolvere questo? O forse ha un altro suggerimento su come raggiungere il mio obiettivo?

Answer 1

Le tabelle hanno regole difficili sulla distribuzione dello spazio delle colonne perché distribuiscono lo spazio in base al contenuto delle celle per impostazione predefinita. Calc (atm) non funzionerà con quello.

Tuttavia, è possibile impostare l'attributo table-layout per table per forzare gli elementi figlio td per ottenere l'esatta larghezza dichiarata. Affinché ciò funzioni, è necessario anche un width (100% works) sul tavolo.

table{ 
    table-layout:fixed; /* this keeps your columns with at the defined width */ 
    width: 100%;  /* a width must be specified */ 

    display: table;  /* required for table-layout to be used 
          (since this is the default value it is normally not necessary; 
          just included for completeness) */ 
} 

e quindi utilizzare percentuali semplici sulle colonne rimanenti.

td.title, td.interpret{ 
    width:40%; 
} 
td.album{ 
    width:20%; 
} 

Dopo aver utilizzato lo spazio per le colonne di larghezza fissa, lo spazio rimanente è distribuita tra le colonne con larghezza relativa.

Per il funzionamento è necessario il tipo di visualizzazione predefinito display: table (al contrario, display: block). Ciò significa tuttavia che non è più possibile avere un height (incluso min-height e max-height) per la tabella.

See your modified Example.

Answer 2

Calc è la funzione generale.

-webkit-calc è per webkit.

Aggiungere quelli in base al browser che si sta utilizzando.

Indipendentemente da ciò, la funzione -calc- verrà ignorata. avendo 3 td che saranno il 40% della larghezza rimanente? Questo è il 120% in totale. Questo è un tavolo. La larghezza del genitore avrà sempre la precedenza.

Tuttavia, se si dispone di TD in 5%, la larghezza totale sarà inferiore a quella della tabella, quindi verrà ignorata.

Bottom line: non utilizzare calc con tabella.