如何使用固定父级均匀地分隔HTML'th'元素？

Question

我有一个HTML表格如下：

<table class='table table-striped jambo_table'>
 <thead>
 <tr class='headings'>
  <th class='column-title'>Campaign ID </th>
  <th class='column-title'>Campaign Name </th>
  <th class='column-title'>Type </th>
  <th class='column-title no-link last'><span class='nobr'>Status</span></th>
 </tr>
 </thead>
.... Other stuff
</table>

具有“标题”类的'tr'元素是固定的。

.headings {
  position: fixed;
  top:200px;
  height: 100%;
  overflow: scroll;
  left:250px;
  right:0;
  border: 1px black solid;
}

这会导致第二个元素间隔不畅。

例如：它应该是这样的：

但它看起来像这样：

如何使这些元素均匀分布？

Answer 1

添加：

html,
body {
  height: 100%;
  width: 100%;
}

table {
  width: 100%;
  table-layout: fixed;
}

th {
  width: 25%
}

注意：演示版的top，left和right属性设置为0，但您可以像以前一样设置它们的效果。

段

html,
body {
  height: 100%;
  width: 100%;
}

table {
  width: 100%;
  table-layout: fixed;
}

th {
  width: 20%
}

.headings {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  border: 1px black solid;
  overflow: scroll;
}

<table class='table table-striped jambo_table'>
  <thead>
    <tr class='headings'>
      <th class='column-title'>Campaign ID </th>
      <th class='column-title'>Campaign Name </th>
      <th class='column-title'>Type </th>
      <th class='column-title no-link last'><span class='nobr'>Status</span></th>
    </tr>
  </thead>

</table>