表体和多个标题对齐

时间：2017-12-06 22:21:49

标签： html css html-table frontend

我试图保持一个表的thead列和tbody列对齐，同时保持tbody可滚动。我将thead显示设置为table-header-group并将tbody设置为table-row-group以修复对齐但是我无法滚动。

这是jsfiddle。我试图在保持整个事物对齐的同时为第一列设置列宽。

我无法为每列设置宽度，因为此表是动态生成的（使用角度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>

1 个答案:

答案 0 :(得分：1)

我已将nth-child css代码替换为以下内容并且有效。

＆＃13;
＆＃13; 
.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%;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

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

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

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

希望这有用！

相关问题
最新问题