使用具有百分比和固定大小（如 px、rem）的 css calc() 函数计算 html 表格单元格宽度答案

【问题标题】：Calculate html table cell width using css calc() function with percentage and fixed size such as px, rem使用具有百分比和固定大小（如 px、rem）的 css calc() 函数计算 html 表格单元格宽度
【发布时间】：2021-01-09 22:38:58
【问题描述】：

我想知道是否可以将 calc() 与百分比和固定值一起使用来动态计算 html 表格单元格的宽度？假设我希望第一列和第三列是 10rem，第二列 70%，第四列 30% 减去固定的第一列和第三列的宽度后的剩余宽度。表格不应该有一个固定的宽度，而是使用父容器的所有可用宽度。

可以将第二列的宽度设置为自动，并将第四列设置为百分比。

CodePen eaxample

SCSS 代码

body {
  padding: .5rem;
  font-size: 1rem;
}

.title {
  margin-bottom: .2rem;
  font-size: 1.2rem;
}

.container {
  width:100%;
}

.div1 {
  display:inline-block;
  width:100%;
  background-color: #D6EAF8;
  
  div {
    display:inline-block;
    text-align:center;
    background-color: #5DADE2;
    margin-left: .1rem;
    margin-top: .1rem;
    margin-bottom: .1rem;
    
    &:nth-of-type(1){
      width:auto;
      width:10rem;
      background-color: #AED6F1;
    }
    
    &:nth-of-type(3){
      width:auto;
      width:10rem;
      background-color: #AED6F1;
    }
    
     &:nth-of-type(2){
      width:auto;
      width: unquote("calc((100% - 20rem - 1rem) * .7)");
    }
    
    &:nth-of-type(4){
      width:auto;
      width: unquote("calc((100% - 20rem - 2rem) * .3)"); 
    }
    
    &:last-of-type {
      margin-right: .1rem;
    }
  }
}

.table1 {
  background-color: #D6EAF8;
  width: 100%;
  table-layout: fixed;
  display: table;
}

thead {
  tr {
    background-color: #5DADE2;
 }
}

tbody {
  td {
    text-align:center;
  }
}

table {
  .col1, .col3 {
    width: 10rem;
  }

  .col2 {
    width: auto;
    //width: unquote("calc(70% - 20rem)");
    width: unquote("calc((100% - 20rem - 1rem) * .7)"); // Does not work
  }

  .col4 {
    width:auto;
    width: unquote("calc((100% - 20rem - 2rem) * .3)"); // Does not work
    //width: unquote("calc(30% - 20rem)"); // Does not work
    //width: unquote("calc(30% - 20rem);"); // Does not work
    //width: calc(30% - 20rem); // Does not work
    //width: calc(30% - (20rem)); // Does not work
    //width: calc(20rem); // Works
    //width: calc(20rem); // Works
  }
}

HTML 代码

<html>
  <body>
    <h2 class="title">Dynamically calculate table cell width</h2>
    
    <h2 class="title">Not a real example. Just trying out calc</h2>
    <div class="container">
    <div class="div1">
      <div class="col1">Val 1</div>
      <div class="col2">Val 2</div>
      <div class="col3">Val 3</div>
      <div class="col4">Val 4</div>
    </div>
      
      <h2 class="title">Table</h2>
      <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 class="col1">Val 1</td>
            <td class="col2">Val 2</td>
            <td class="col3">Col 3</td>
            <td class="col4">Col 4</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>

【问题讨论】：

SCSS 不运行这个 sn-p。您只能更改为代码。
试试calc(#{"30% - 20rem"})
SCSS 插值似乎没有任何区别。请参阅更新的 CodePen 示例。我之前确实尝试过，但是使用 SCSS 变量，以确保计算发生在运行时而不是编译时？我错过了在示例中包含此测试。

标签： html css sass html-table

【解决方案1】：

当然你可以使用calc() 来做你提到的事情。以下是你可以做到的。

scss

.col1, .col3 {
   width: 10rem;
 }

 .col2 {
   --remainingWidth: calc(100% - 20rem);
   width: calc(var(--remainingWidth) * 0.7);
 }

 .col4 {
   --remainingWidth: calc(100% - 20rem);
   width: calc(var(--remainingWidth) * 0.3);
 }

【讨论】：

我尝试了 CSS 自定义属性。但是，我没有注意到任何区别。请参阅更新的 CodePen 示例。也许我错过了什么？