CODEWITHSUNDEEP
htmlcsshtml-tablefrontend
Mos No
Mos No

Reputation: 159

table body and multiple headers alignment

I am trying to keep a table's thead columns and tbody columns aligned while keeping tbody scrollable. I had thead display set to table-header-group and tbody set to table-row-group to fix alignment but then I could not scroll.

Here is the jsfiddle. I am trying to set the column width for just the first column while keeping the whole thing aligned.

I cannot set a width for every column since this table is dynamically generated (using angular ng-repeat) and could have as little as 3 columns and as many as 12

any pointers would be helpful 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>

Upvotes: 1

Views: 1981

Answers (1)

Gosi
Gosi

Reputation: 2003

I have replaced both your nth-child css code with the following and it works. 

.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>

This sets the first th to a 50% value (you can change that to suit your preference).

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

And this, sets your first 2 td to a width of 25% (half of the above width which is currently set at 50%, so change it accordingly to half of any number you set in the above css.).

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

Hope this was helpful!

Upvotes: 1

Related Questions