Question

我有一张桌子，其中有4列：

column 1: fixed width of 500px;
column 2: calc(33% - 165px);
column 3: calc(33% - 165px);
column 4: calc(33% - 165px);

在最后3列上具有相同的值，这些列的宽度是不同的。

这是我的HTML：

<table class="table">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Age</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="width: 500px;">Vishal</td>
      <td style="width: calc(33% - 165px); background: #ff0000;">Sherathiya</td>
      <td style="width: calc(33% - 165px); background: #ffff00;">28</td>
      <td style="width: calc(33% - 165px); background: #ff00ff;">edit</td>
    </tr>
    <tr>
      <td>Seema</td>
      <td>Kaneria</td>
      <td>23</td>
      <td>edit</td>
    </tr>
    <tr>
      <td>Nikunj</td>
      <td>Ramani</td>
      <td>20</td>
      <td>delete</td>
    </tr>
  </tbody>
</table>

这是css：

.table {
  width: 100%;
}

以下是重现问题的codepen：

https://codepen.io/Vishal1419/pen/aqOErL

解决方案：

我必须table-layout: fixed。此外，我还必须为标题应用样式。所以，现在

我的HTML看起来像：

<table class="table">
  <thead>
    <tr>
      <th style="width: 500px;">First Name</th>
      <th>Last Name</th>
      <th>Age</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="width: 500px;">Vishal</td>
      <td class="field">Sherathiya</td>
      <td class="field">28</td>
      <td class="field">edit</td>
    </tr>
    <tr>
      <td>Seema</td>
      <td>Kaneria</td>
      <td>23</td>
      <td>edit</td>
    </tr>
    <tr>
      <td>Nikunj</td>
      <td>Ramani</td>
      <td>20</td>
      <td>delete</td>
    </tr>
  </tbody>
</table>

和css：

表{ 表格的布局：固定; 宽度：100％; }

.field { 宽度：计算（33％ - 165px）; 背景：＃ff0000; }

Answer 1

只需使用css并给他们分类：

html, body {
  width: 100%;
}

.field {
  width: calc(33% - 165px);
  background: #ff0000;
}

HTML：

<td style="width: 500px;">Vishal</td>
  <td class="field">Sherathiya</td>
  <td class="field">28</td>
  <td class="field">edit</td>

calc不计算宽度

1 个答案: