在表中使用calc() [英] Using calc() in table

问题描述

我正在尝试使用calc固定我的th:last-child的宽度，该宽度与其他宽度相差15px.我所做的是:

 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小提琴复制.

我除以12是因为它是表中的列数.据我了解，100％被视为父级的宽度.问题是，最后，我不明白我的期望，知道为什么吗?

解决方案

您必须将table-layout属性设置为固定".

请参见对表使用calc()

工作示例: https://jsfiddle.net/rpyydd5n/3/

I am trying to use calc to fix the width of my th:last-child which differs from the others by 15px. What I've done is:

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.

I've divided by 12 because it is the number of columns in my table. As I understood 100% is treated as the width of the parent. The problem is that finally, I don't get what I would expect, any idea why?

解决方案

You must set table-layout property to 'fixed'.

See using calc() with tables

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

这篇关于在表中使用calc()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！