Używanie calc() w tabeli

Question

Próbuję użyć calc, aby naprawić szerokość mojego th:last-child, która różni się od pozostałych o 15 pikseli. Co robiłem jest:

th:last-child { 
 
    width: calc((100% - 30px)/12 + 30px); 
 
} 
 
table, tr { 
 
width:100%; 
 
border: 1px solid black; 
 
height:10px; 
 
} 
 
th { 
 
    border-right: 1px solid black; 
 
    width: calc((100% - 30px)/12); 
 
}

<table> 
 
<thead> 
 
    <tr> 
 
    <th>Column 1</th> 
 
    <th>Column 2</th> 
 
    <th>Column 3</th> 
 
    <th>Column 4</th> 
 
    <th>Column 5</th> 
 
    <th>Column 6</th> 
 
    <th>Column 7</th> 
 
    <th>Column 8</th> 
 
    <th>Column 9</th> 
 
    <th>Column 10</th> 
 
    <th>Column 11</th> 
 
    <th>Column 12</th> 
 
    </tr> 
 
</thead> 
 
<tbody> 
 
<tr> 
 
    <td>Row 1</td> 
 
    <td>Row 2</td> 
 
    <td>Row 3</td> 
 
    <td>Row 4</td> 
 
    <td>Row 5</td> 
 
    <td>Row 6</td> 
 
    <td>Row 7</td> 
 
    <td>Row 8</td> 
 
    <td>Row 9</td> 
 
    <td>Row 10</td> 
 
    <td>Row 11</td> 
 
    <td>Row 12</td> 
 
</tr> 
 
    
 
</tbody> 
 
</table>

JS Fiddle reproduction.

Podzieliłem przez 12, ponieważ jest to liczba kolumn w moim stole. Jak rozumiem, 100% traktowane jest jako szerokość rodzica. Problem polega na tym, że w końcu nie dostaję tego, czego oczekiwałbym, żadnego pomysłu, dlaczego?

Answer 1

Musisz ustawić table-layout właściwość „stałe”.

Zobacz using calc() with tables

i Przykład pracy: https://jsfiddle.net/rpyydd5n/3/

Answer 2

Zasadniczo ustawiasz table na width z 100% + 15px. Tak więc, o ile element nadrzędny na to nie pozwala, większość przeglądarek ponownie obliczy ponownie do wartości 100% i odpowiednio skaluje wartości TH i TD. Dlaczego nie użyć min-width na ostatnim dziecku?

Answer 3

zmienić w css

th:last-child { 
     width: calc(100%/12 + 100px); 
     background-color:#ccc; 

} 
th{width:5%; } 

Answer 4

Co o użyciu padding-prawo 15px na ostatniej TH, aby go rozwinąć, a następnie za pomocą div wewnątrz że th z trudnym szerokości Calc (100% + 15px), nie daje 1/12 szerokości stołu + 15px, zamiast tego podaje naturalną szerokość tego ostatniej zawartości zawartość + 15px, co nie jest dokładnie tym, czego wymagasz.

Powodem, dla którego pisał to od razu jest po prostu podzielić się pomysł, niż może być przydatne do rozwiązania problemu:

table, tr { 
 
    width:100%; 
 
    border: 1px solid black; 
 
    height:10px; 
 
} 
 

 
th { 
 
    border-right: 1px solid black; 
 
} 
 

 
th:last-child { 
 
    padding-right: 15px; 
 
} 
 

 
th:last-child > div { 
 
    width: calc(100% + 15px); 
 
}

<table> 
 
<thead> 
 
    <tr> 
 
    <th>Column 1</th> 
 
    <th>Column 2</th> 
 
    <th>Column 3</th> 
 
    <th>Column 4</th> 
 
    <th>Column 5</th> 
 
    <th>Column 6</th> 
 
    <th>Column 7</th> 
 
    <th>Column 8</th> 
 
    <th>Column 9</th> 
 
    <th>Column 10</th> 
 
    <th>Column 11</th> 
 
    <th> 
 
     <div>Column 12</div> 
 
    </th> 
 
    </tr> 
 
</thead> 
 
</table>