Question

我有一个包含4列的表格（宽度：100％）。第1列和第3列设置为190px的固定宽度。我希望其余两列的宽度相等，而不管表的宽度如何。我尝试将<colgroup style='width: 50%'>用于两列的每个分组。我已经尝试通过CSS在每个表列上使用calc函数calc(50% - 190px)。我还使用了最大和最小宽度的不同组合。一旦一列由于内容而被迫增加，所有尝试均将失败。而且内容是文本，因此应该环绕而不是覆盖宽度。这是我的html和CSS。

css：

table, td {
  padding: 0px;
  margin: 0px;
  border: none;
  border-collapse: collapse;
}
table.main_table {
  width: 100%;
}
td.fixed_column {
  width: 190px;
  background-color: red;
}
td.non_fixed_column {
  max-width: calc(50% - 190px);
  background-color: yellow;
}

html：

<table class='main_table'>
  <tr><td class='fixed_column'>1.1</td><td class='non_fixed_column'>2.1</td><td class='fixed_column'>3.1</td><td class='non_fixed_column'>4.1</td></tr>
  <tr><td class='fixed_column'>1.2</td><td class='non_fixed_column'>2.2</td><td class='fixed_column'>3.2</td><td class='non_fixed_column'>4.2</td></tr>
</table>

    table, td {
      padding: 0px;
      margin: 0px;
      border: none;
      border-collapse: collapse;
    }
    table.main_table {
      width: 100%;
    }
    td.fixed_column {
      width: 190px;
      background-color: red;
    }
    td.non_fixed_column {
      max-width: calc(50% - 190px);
      background-color: yellow;
    }

<table class='main_table'>
      <tr><td class='fixed_column'>1.1</td><td class='non_fixed_column'>2.1</td><td class='fixed_column'>3.1</td><td class='non_fixed_column'>4.1</td></tr>
      <tr><td class='fixed_column'>1.2</td><td class='non_fixed_column'>2.2</td><td class='fixed_column'>3.2</td><td class='non_fixed_column'>4.2</td></tr>
    </table>

这给了我一个完美的结果……直到其中一个单元格的内容导致一栏增长。我不在乎细胞/行的高度。

    table, td {
      padding: 0px;
      margin: 0px;
      border: none;
      border-collapse: collapse;
    }
    table.main_table {
      width: 100%;
    }
    td.fixed_column {
      width: 190px;
      background-color: red;
    }
    td.non_fixed_column {
      max-width: calc(50% - 190px);
      background-color: yellow;
    }

<table class='main_table'>
      <tr><td class='fixed_column'>1.1</td><td class='non_fixed_column'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</td><td class='fixed_column'>3.1</td><td class='non_fixed_column'>4.1</td></tr>
      <tr><td class='fixed_column'>1.2</td><td class='non_fixed_column'>2.2</td><td class='fixed_column'>3.2</td><td class='non_fixed_column'>4.2</td></tr>
    </table>

我不想使用javascript来调整单元格的大小。我不明白这里的工作原理！

Answer 1

您正在寻找table-layout: fixed;。

表布局：固定； -表和列的宽度由宽度设置表格和列元素的数量或单元格第一行的宽度。后续行中的单元格不会影响列宽。

请参阅：https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

table, td {
      padding: 0px;
      margin: 0px;
      border: none;
      border-collapse: collapse;
    }
    table.main_table {
      width: 100%;
      table-layout: fixed;
    }
    td.fixed_column {
      width: 190px;
      background-color: red;
    }
    td.non_fixed_column {
      background-color: yellow;
    }

<table class='main_table'>
      <tr><td class='fixed_column'>1.1</td>
      <td class='non_fixed_column'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</td><td class='fixed_column'>3.1</td><td class='non_fixed_column'>4.1</td></tr>
      <tr><td class='fixed_column'>1.2</td><td class='non_fixed_column'>2.2</td><td class='fixed_column'>3.2</td><td class='non_fixed_column'>4.2</td></tr>
    </table>

Answer 2

我已经解决了您的问题，问题是您使用的是最小宽度，如果您想限制特定内容的竞争，则无需使用最小宽度。

请使用width而不是min-width，以下是我的建议，请尝试。

td.non_fixed_column {
    width: 200px;
    background-color: yellow;
}

使4列中的2列相等宽度

2 个答案: