Geek Answers Handbook

Using calc () in a table

I am trying to use calc to fix the width of my th:last-child , which is 15px different from the rest. I have done the following:

 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>

Reproduction of a script of JS .

I divided by 12 because this is the number of columns in my table. As I understand it, 100% is considered as the width of the parent. The problem is, finally, I don’t understand what I expect, any idea why?

+6
source share
4 answers

You must set the table-layout property to "fixed".

See using calc () with tables

And a working example: https://jsfiddle.net/rpyydd5n/3/

+4
source

Basically, you set table to width of 100% + 15px . Therefore, if the parent element allows this, most browsers recalculate back to 100% and scale TH and TD respectively. Why not use min-width for the last child?

0
source

change this value in css

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

How about using padding-right 15px on the last page to expand it and then using the div inside it with a complex 100% + 15px) , it does not give 1/12 of the table width + 15px, instead it gives the natural width of this last th content + 15px, which is not exactly what you need.

The reason I posted this right away is just to share an idea that might be helpful in solving the problem:

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

More articles:


All Articles