css table columns wont line up with fixed header

Question

I have been trying to make a scrollable table but my header and my columns wont line up ... I'd also like it to span the entire width (100%) and I have yet to solve that either... here is the raw code and I have provided a link to a CSS fiddle query of my tables design and my progress so far...

My ultimate goals;

have the table span the full width of the page
have the header static
have the body of the table scrollable

HTML

<table class="fixed_header">
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
      <th>Col 4</th>
      <th>Col 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>row 1-0</td>
      <td>row 1-1</td>
      <td>row 1-2</td>
      <td>row 1-3</td>
      <td>row 1-4</td>
    </tr>
    <tr>
      <td>row 2-0</td>
      <td>row 2-1</td>
      <td>row 2-2</td>
      <td>row 2-3</td>
      <td>row 2-4</td>
    </tr>
    <tr>
      <td>row 3-0</td>
      <td>row 3-1</td>
      <td>row 3-2</td>
      <td>row 3-3</td>
      <td>row 3-4</td>
    </tr>
    <tr>
      <td>row 4-0</td>
      <td>row 4-1</td>
      <td>row 4-2</td>
      <td>row 4-3</td>
      <td>row 4-4</td>
    </tr>
  </tbody>
</table>

CSS:

.fixed_header tbody{
  display:block;
  overflow:auto;
  height:100px;
  width:100%;
}
.fixed_header thead tr{
  display:block;
   height:20px;
}
table {
  border-collapse: collapse;
  width: 100%;
}

table tr {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  padding: .35em;
  width: 100%;
}
table tbody{
  width: 100%;
}
table th {
background-color: #545556;
    color: white;
  padding: .425em;
  text-align: center;
}

table td {
  padding: .425em;
  text-align: center;
    word-wrap: break-word;
    font-size: 0.75em;
}

table th {
  font-size: .75em;
  letter-spacing: .1em;
  text-transform: uppercase;
}

https://jsfiddle.net/ap4ognvz/6/

Check this question: https://stackoverflow.com/questions/23989463/how-to-set-tbody-height-with-overflow-scroll — Swati Anand, Jul 07 '18 at 16:59

score 0 · Accepted Answer · answered Jul 07 '18 at 17:10

0

DEMO: https://jsfiddle.net/ap4ognvz/64/

I've added the following to your CSS:

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

So your final CSS would look like the following:

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

.fixed_header thead tr {
  height: 20px;
}

table {
  border-collapse: collapse;
}

table tr {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  padding: .35em;
}

table th {
  background-color: #545556;
  color: white;
  padding: .425em;
  text-align: center;
}

table td {
  padding: .425em;
  text-align: center;
  word-wrap: break-word;
  font-size: 0.75em;
}

table th {
  font-size: .75em;
  letter-spacing: .1em;
  text-transform: uppercase;
}

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

I have referred the accepted answer to this question.

answered Jul 07 '18 at 17:10

Swati Anand

869
6
9

When I input it into my css file, my and become the same height! Is there any way to override any css so that it is ALWAYS a specific height and not matching ? – NRav Jul 07 '18 at 17:28
@NicholasRavanelli do you mean is taking up 100px or the has shrinked to 20px? I'm not able to understand your problem. Can you please create a demo? If your style is being overridden by some other css, you can use !important directive to make sure your css is applied – Swati Anand Jul 07 '18 at 17:44
my bad, I had another piece of CSS mucking it up! – NRav Jul 07 '18 at 18:09

css table columns wont line up with fixed header

1 Answers1