如何使 CSS 宽度属性等于数学表达式的结果

Question

我试图使宽度属性等于 (100/3)% 因为我试图将宽度平均分配给 3 列。但显然这是无效的css。完成此任务的正确方法是什么？

Answer 1

纯CSS方法：

th, td {
  width: calc(100% / 7);
}

Javascript 方法：您可以获得 table 元素并指定样式，试试这个：

let th = document.getElementsByTagName('th');
let td = document.getElementsByTagName('td');

console.log(th, td)

for(let el of th){
    el.style.width = (100 / 3) + 'px';
}

for(let el of td){
    el.style.width = (100 / 3) + 'px';
}

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Answer 2

calc 是要走的路。

只需确保在运算符和操作数之间留一个 space。

// This is correct
.class {
  width: calc(100% - 5px);
}

// This produces an error
.class {
  width: calc(100%-5px);
}

如何使 CSS 宽度属性等于数学表达式的结果

how to make CSS width property equal to the result of a mathematical expression

javascript

css

width

如何使 CSS 宽度 属性 等于数学表达式的结果

how to make CSS width property equal to the result of a mathematical expression

javascript

css

width

如何使 CSS 宽度属性等于数学表达式的结果