html - 表主体和多个标题对齐

我正在尝试保持表格的thead列和tbody列对齐，同时保持tbody可滚动。我将thead显示器设置为table-header-group，将tbody设置为table-row-group，以解决对齐问题，但随后无法滚动。

这是jsfiddle。我试图设置第一列的宽度，同时保持整体对齐。

我无法为每列设置宽度，因为此表是动态生成的（使用angular ng-repeat），可能只有3列和多达12列

任何指针都会有所帮助JsFiddle

.table {
  border-collapse: collapse;
  width: 100%;
}

.table td {
  font-size: 14px;
  padding: 10px 20px;
  overflow: hidden;
  word-break: normal;
  color: #333;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  background-color: #FFFFFF;
  font-family: "Courier New", Courier, monospace !important;
  text-align: center;
}

.table th {
  font-weight: bold;
  font-family: "Courier New", Courier, monospace !important;
  text-align: center;
  font-size: 14px;
  border: 1px solid #ccc;
  border-bottom: 2px solid #ccc;
  padding: 10px 20px;
  word-break: normal;
  color: #333;
  background-color: #F0F0F0;
}

tbody {
  overflow-y: scroll;
  overflow-x: hidden;
  height: 100px;
  display: block;
}

thead {
  display: table;
  width: calc(100% - 17px);
  table-layout: fixed;
  /* position: sticky; */
}

tbody tr {
  table-layout: fixed;
  display: table;
  width: 100%;
}

tbody tr td:first-child {
  width: 40%;
}

thead tr:nth-child(2) th:first-child {
  width: 40%;
}

td {
  white-space: normal;
}

<table class="table">
  <thead>
    <tr>
      <th colspan=2>Course ID</th>
      <th colspan=1>Course Name</th>
      <th colspan=1>Course Name</th>
    </tr>
    <tr>
      <th>Course ID</th>
      <th>Course ID2</th>
      <th>Course Name</th>
      <th>Course Name2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>hello theresdfdsfsfsafdsafdsafdsafdsadfsadfsafd</td>
      <td>hello</td>
      <td>there</td>
      <td>world</td>
    </tr>
    <tr>
      <td>hello there</td>
      <td>hello</td>
      <td>there</td>
      <td>world</td>
    </tr>
    <tr>
      <td>hello there</td>
      <td>hello</td>
      <td>there</td>
      <td>world</td>
    </tr>
    <tr>
      <td>hello there</td>
      <td>hello</td>
      <td>there</td>
      <td>world</td>
    </tr>
    <tr>
      <td>hello there</td>
      <td>hello</td>
      <td>there</td>
      <td>world</td>
    </tr>
    <tr>
      <td>hello there</td>
      <td>hello</td>
      <td>there</td>
      <td>world</td>
    </tr>
    <tr>
      <td>hello there</td>
      <td>hello</td>
      <td>there</td>
      <td>world</td>
    </tr>
    <tr>
      <td>hello there</td>
      <td>hello</td>
      <td>there</td>
      <td>world</td>
    </tr>
    <tr>
      <td>hello there</td>
      <td>hello</td>
      <td>there</td>
      <td>world</td>
    </tr>
    <tr>
      <td>hello there</td>
      <td>hello</td>
      <td>there</td>
      <td>world</td>
    </tr>
    <tr>
      <td>hello there</td>
      <td>hello</td>
      <td>there</td>
      <td>world</td>
    </tr>
    <tr>
      <td>hello there</td>
      <td>hello</td>
      <td>there</td>
      <td>world</td>
    </tr>
    <tr>
      <td>hello there</td>
      <td>hello</td>
      <td>there</td>
      <td>world</td>
    </tr>
    <tr>
      <td>hello there</td>
      <td>hello</td>
      <td>there</td>
      <td>world</td>
    </tr>
    <tr>
      <td>hello there</td>
      <td>hello</td>
      <td>there</td>
      <td>world</td>
    </tr>
    <tr>
      <td>hello there</td>
      <td>hello</td>
      <td>there</td>
      <td>world</td>
    </tr>
  </tbody>
</table>

最佳答案

我已经用以下代码替换了您的nth-child css代码，并且可以正常工作。

.table {
  border-collapse: collapse;
  width: 100%;
}

.table td {
  font-size: 14px;
  padding: 10px 20px;
  overflow: hidden;
  word-break: normal;
  color: #333;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  background-color: #FFFFFF;
  font-family: "Courier New", Courier, monospace !important;
  text-align: center;
}

.table th {
  font-weight: bold;
  font-family: "Courier New", Courier, monospace !important;
  text-align: center;
  font-size: 14px;
  border: 1px solid #ccc;
  border-bottom: 2px solid #ccc;
  padding: 10px 20px;
  word-break: normal;
  color: #333;
  background-color: #F0F0F0;
}

tbody {
  overflow-y: scroll;
  overflow-x: hidden;
  height: 100px;
  display: block;
}

thead {
  display: table;
  width: calc(100% - 17px);
  table-layout: fixed;
  /* position: sticky; */
}

tbody tr {
  table-layout: fixed;
  display: table;
  width: 100%;
}

td {
  white-space: normal;
}

th:nth-child(1) {width:50%;}

td:nth-child(-n + 2) {
    width:25%;
}

<table class="table">
  <thead>
    <tr>
      <th colspan=2>Course ID</th>
      <th colspan=1>Course Name</th>
      <th colspan=1>Course Name</th>
    </tr>
    <tr>
      <th>Course ID</th>
      <th>Course ID2</th>
      <th>Course Name</th>
      <th>Course Name2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>hello theresdfdsfsfsafdsafdsafdsafdsadfsadfsafd</td>
      <td>hello</td>
      <td>there</td>
      <td>world</td>
    </tr>
    <tr>
      <td>hello there</td>
      <td>hello</td>
      <td>there</td>
      <td>world</td>
    </tr>
    <tr>
      <td>hello there</td>
      <td>hello</td>
      <td>there</td>
      <td>world</td>
    </tr>
    <tr>
      <td>hello there</td>
      <td>hello</td>
      <td>there</td>
      <td>world</td>
    </tr>
    <tr>
      <td>hello there</td>
      <td>hello</td>
      <td>there</td>
      <td>world</td>
    </tr>
    <tr>
      <td>hello there</td>
      <td>hello</td>
      <td>there</td>
      <td>world</td>
    </tr>
    <tr>
      <td>hello there</td>
      <td>hello</td>
      <td>there</td>
      <td>world</td>
    </tr>
    <tr>
      <td>hello there</td>
      <td>hello</td>
      <td>there</td>
      <td>world</td>
    </tr>
    <tr>
      <td>hello there</td>
      <td>hello</td>
      <td>there</td>
      <td>world</td>
    </tr>
    <tr>
      <td>hello there</td>
      <td>hello</td>
      <td>there</td>
      <td>world</td>
    </tr>
    <tr>
      <td>hello there</td>
      <td>hello</td>
      <td>there</td>
      <td>world</td>
    </tr>
    <tr>
      <td>hello there</td>
      <td>hello</td>
      <td>there</td>
      <td>world</td>
    </tr>
    <tr>
      <td>hello there</td>
      <td>hello</td>
      <td>there</td>
      <td>world</td>
    </tr>
    <tr>
      <td>hello there</td>
      <td>hello</td>
      <td>there</td>
      <td>world</td>
    </tr>
    <tr>
      <td>hello there</td>
      <td>hello</td>
      <td>there</td>
      <td>world</td>
    </tr>
    <tr>
      <td>hello there</td>
      <td>hello</td>
      <td>there</td>
      <td>world</td>
    </tr>
  </tbody>
</table>

这会将第一个th设置为50％的值（您可以根据自己的喜好进行更改）。

th:nth-child(1) {
 width:50%;
}

然后，将前2个td设置为25％的宽度（上述宽度的一半，当前设置为50％，因此将其相应地更改为您在上述CSS中设置的任何数字的一半）。

td:nth-child(-n + 2) {
 width:25%;
}

希望这对您有所帮助！