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

Question

我试图使宽度属性等于，(100/3)%因为我试图将宽度均匀地划分为 3 列。但显然这不是有效的 css。实现这一目标的正确方法是什么？

Answer 1

calc是要走的路。

只需确保运算符和操作数之间留有空格即可。

// This is correct

.class {

  width: calc(100% - 5px);

}

// This produces an error

.class {

  width: calc(100%-5px);

}

Answer 2

纯CSS方法：

th, td {

  width: calc(100% / 7);

}

Javascript 方法：您可以获取表格元素并分配样式，试试这个：

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>