CSS：将宽度/高度设置为表格标题列的百分比减去像素

Question

为什么在下面的示例中，表格标题的列不采用CSS中定义的宽度？

我认为在表1中，浏览器无法计算一个百分比值和一个固定值。

/************* commun css***********************/
table {
   border-collapse: collapse;
   table-layout:fixed;
   width: 100%;
   position: relative;
}

td, th {
   border: 1px solid black;
   -webkit-box-sizing: border-box;
}

tr{
  width: 100%;
  position: relative;
}

/************* css table 1***********************/

.table1 .col1 {
  width: calc(35% - 10px);
}

.table1 .col2 {
  width: calc(40% - 10px);
}

.table1 .col3 {
  width: calc(25% - 10px);
}

.table1 .col4 {
  width: 30px;
}

/************* css table 2***********************/
.table2 .col1 {
  width: calc(30%);
}

.table2 .col2 {
  width: calc(20%);
}

.table2 .col3 {
  width: calc(50%);
}

<p>
Table 1 : invalid render (Chrome browser)
</p>
<table class="table1">
  <thead>
    <tr>
      <th class="col1">Col 1</th>
      <th class="col2">Col 2</th>
      <th class="col3">Col 3</th>
      <th class="col4">Col 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1</td>
      <td>Row 1</td>
      <td>Row 1</td>
      <td>Row 1</td>
    </tr>
    <tr>
      <td>Row 2</td>
      <td>Row 2</td>
      <td>Row 2</td>
      <td>Row 2</td>
    </tr>
  </tbody>
</table>

<p>
Table 2 : valid render (Chrome browser)
</p>

<table class="table2">
  <thead>
    <tr>
      <th class="col1">Col 1</th>
      <th class="col2">Col 2</th>
      <th class="col3">Col 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1</td>
      <td>Row 1</td>
      <td>Row 1</td>
    </tr>
    <tr>
      <td>Row 2</td>
      <td>Row 2</td>
      <td>Row 2</td>
    </tr>
  </tbody>
</table>

在这种情况下，有人对您有任何建议吗？

提前谢谢

示例：https://jsfiddle.net/3wq65hb4/

Answer 1

是的，表格的calc（）宽度有问题。但它适用于div。在div而不是表格上如何处理？

让我们看一下您的示例： https://jsfiddle.net/3wq65hb4/39/

您可以在这里找到

.row {
    display: flex;
}

用于列的高度相等。您也可以在这里找到

margin-left: -1px;

这是边界的解决方案-避免出现双重边界，例如：

还请记住，您的列的最大宽度：30px表示即使内容变宽，它也始终为30px：

但是也许这就是您想要实现的目标。

请让我知道该解决方案是否适合您。祝其他html好运：）