Table not resizing columns as per % in colgroup

Question

Can someone advise on why the columns aren't resizing according to their %s in colgroup?

PROBLEM: Make something like 50% first column 25% second column and third. While preserving display block on the tbody, such that we have scroll on the body not the whole table. SOLUTION: Leave in all the code like is below, but use td:nth-child property to manually set % width instead of using colgroup (because it required that display is not block but table-row-group).

I have tried using '3*','1*','1*' for the col width as well, to no avail. I think it must have to do something with the fact that I am placing the table inside a div container or due to display:block property, perhaps it has to be display: table. But when I do display: table, then table takes up only 50% of the container space and floats to left and columns are still of equal width. Thanks for any help!

EDIT: I have also tried style="width: 100%" on the table.

EDIT EDIT: removing display:block from .fixed_header thead tr and .fixed_header tbody fixes the issue for the header. Also, setting width:100% in .fixed_header th, .fixed_header td almost fixes it, it is a little bit misalligned.

.table-container {
    position: absolute;
    display: block;
    height: 94%;
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    top: 15px;
}

// https://codepen.io/GhostRider/pen/GHaFw
.style-2::-webkit-scrollbar-track
{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 border-radius: 10px;
 background-color: #F5F5F5;
}

.style-2::-webkit-scrollbar
{
 width: 12px;
 background-color: #F5F5F5;
}

.style-2::-webkit-scrollbar-thumb
{
 border-radius: 10px;
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
 background-color: #F4F7F7;
}

table, tbody {
    width: 100%;
    height: 100%;
    position: relative;
    display: inline-block;
    table-layout: fixed;
}

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

.fixed_header tbody{
  display:block;
  width: 100%;
  overflow-y: auto;
  height: 90%;
}

.fixed_header thead tr {
   display: block;
   border-bottom: 1px solid black;
}

.fixed_header th, .fixed_header td {
  padding: 5px;
  text-align: left;
  width: 200px;
}

<div class="table-container">

                            <table class="fixed_header">
                              <colgroup style="width: 100%;">
                                  <col span="1" style="width: 50%;">
                                  <col span="1" style="width: 25%;">
                                  <col span="1" style="width: 25%;">
                              </colgroup>

                              <thead>
                                <tr>
                                  <th>Factor</th>
                                  <th>y_i</th>
                                  <th>F_i</th>
                                </tr>
                              </thead>

                              <tbody class="style-2">
                                <tr>
                                  <td>row 1-0</td>
                                  <td>row 1-1</td>
                                  <td>row 1-2</td>
                                </tr>
                                <tr>
                                  <td>row 2-0</td>
                                  <td>row 2-1</td>
                                  <td>row 2-2</td>
                                </tr>
                                <tr>
                                  <td>row 3-0</td>
                                  <td>row 3-1</td>
                                  <td>row 3-2</td>
                                </tr>
                                <tr>
                                  <td>row 4-0</td>
                                  <td>row 4-1</td>
                                  <td>row 4-2</td>
                                </tr>
                                <tr>
                                  <td>row 5-0</td>
                                  <td>row 5-1</td>
                                  <td>row 5-2</td>
                                </tr>
                                <tr>
                                  <td>row 6-0</td>
                                  <td>row 6-1</td>
                                  <td>row 6-2</td>
                                </tr>
                                <tr>
                                  <td>row 7-0</td>
                                  <td>row 7-1</td>
                                  <td>row 7-2</td>
                                </tr>
                              <tr>
                                  <td>row 7-0</td>
                                  <td>row 7-1</td>
                                  <td>row 7-2</td>
                                </tr>
                              <tr>
                                  <td>row 7-0</td>
                                  <td>row 7-1</td>
                                  <td>row 7-2</td>
                                </tr>
                              <tr>
                                  <td>row 7-0</td>
                                  <td>row 7-1</td>
                                  <td>row 7-2</td>
                                </tr>
                              </tbody>
                            </table>
                            </div>

html 5 is now support col-width.https://www.w3schools.com/tags/tag_colgroup.asp — parag parmar, Jun 01 '18 at 09:36

score 1 · Answer 1 · answered Jun 01 '18 at 09:59

1

Removing the below classes solved the issue.

table, tbody {
    width: 100%;
    height: 100%;
    position: relative;
    display: inline-block;
    table-layout: fixed;
}


.fixed_header tbody{
  display:block;
  width: 100%;
  overflow-y: auto;
  height: 90%;
}

.fixed_header thead tr {
   display: block;
   border-bottom: 1px solid black;
}

I see the default display table-row-group of the tbody has been replaced with display:inline-block . My guess is that these display properties seen below make elements behave like tables and their children and consequently apply table grouping rules on them. Fiddle here

display: table; display: table-cell; display: table-column; display: table-colgroup; display: table-header-group; display: table-row-group; display: table-footer-group; display: table-row; display: table-caption;

answered Jun 01 '18 at 09:59

semuzaboi

4,972
5
20
35

Great. I have also just noticed that, but removing inline-block, also removes overflow on the y axis – Naz Jun 01 '18 at 10:01
Cant we wrap the table in a div and achieve scrolling via the parent div? i.e if that is the ask :) – semuzaboi Jun 01 '18 at 10:05
we have to achieve scrolling around tbody, not the whole thing (including thead), and it removes my div, when I put it around tbody :O – Naz Jun 01 '18 at 10:09
oh no, they want me to change it back to display: block. https://stackoverflow.com/questions/17067294/html-table-with-100-width-with-vertical-scroll-inside-tbody – Naz Jun 01 '18 at 10:10
ah ! the old fixed header problem :O ... as i understand you wanna have the header fixed for a table with variable column widths !.. – semuzaboi Jun 01 '18 at 10:17
I want, in this particular case, something like: 50% first column, 25% second and 25% third, and at the same time have scrollbar on tbody, not the whole thing. I have noticed, that that Fiddle, is not quite what I need, it is almost what I need, apart from the fixed % width columns. – Naz Jun 01 '18 at 10:19
hmmm, maybe I should you use n-th child css selector and set every first td in each tr to 50% and every other td to 25%. That might work! Then we can keep display: block for tbody, and omit using colgroup. – Naz Jun 01 '18 at 10:22

score 0 · Answer 2 · answered Jun 01 '18 at 09:44

<table style="width: 100%">
<colgroup>
   <col span="1" style="width: 50%;">
   <col span="1" style="width: 25%;">
   <col span="1" style="width: 25%;">
</colgroup>



<!-- Put <thead>, <tbody>, and <tr>'s here! -->
<tbody>
    <tr>
        <td style="background-color: #777">50%</td>
        <td style="background-color: #aaa">25%</td>
        <td style="background-color: #777">25%</td>
    </tr>
    <tr>
      <td>row 1-0</td>
      <td>row 1-1</td>
      <td>row 1-2</td>
    </tr>
    <tr>
      <td>row 2-0</td>
      <td>row 2-1</td>
      <td>row 2-2</td>
    </tr>
    <tr>
      <td>row 3-0</td>
      <td>row 3-1</td>
      <td>row 3-2</td>
    </tr>
    <tr>
      <td>row 4-0</td>
      <td>row 4-1</td>
      <td>row 4-2</td>
    </tr>
    <tr>
      <td>row 5-0</td>
      <td>row 5-1</td>
      <td>row 5-2</td>
    </tr>
    <tr>
      <td>row 6-0</td>
      <td>row 6-1</td>
      <td>row 6-2</td>
    </tr>
    <tr>
      <td>row 7-0</td>
      <td>row 7-1</td>
      <td>row 7-2</td>
    </tr>
  <tr>
      <td>row 7-0</td>
      <td>row 7-1</td>
      <td>row 7-2</td>
    </tr>
  <tr>
      <td>row 7-0</td>
      <td>row 7-1</td>
      <td>row 7-2</td>
    </tr>
  <tr>
      <td>row 7-0</td>
      <td>row 7-1</td>
      <td>row 7-2</td>
    </tr>
</tbody>

Try this! I hope this help. Is working for me.

Why is it answering the op question ? – executable Jun 01 '18 at 09:45 — executable, Jun 01 '18 at 09:45
I have seen this. It is not answering my q – Naz Jun 01 '18 at 09:47 — Naz, Jun 01 '18 at 09:47

score 0 · Answer 3 · answered Jun 01 '18 at 09:46

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<div class="table-container">

                            <table class="fixed_header" style="width: 100%;">


                              <thead>
                                <tr>
                                  <th style="width: 50%;">Factor</th>
                                  <th style="width: 25%;">y_i</th>
                                  <th style="width: 25%;">F_i Factor </th>
                                </tr>
                              </thead>

                              <tbody class="style-2">
                                <tr>
                                  <td>row 1-0</td>
                                  <td>row 1-1</td>
                                  <td>row 1-2</td>
                                </tr>
                                <tr>
                                  <td>row 2-0</td>
                                  <td>row 2-1</td>
                                  <td>row 2-2</td>
                                </tr>
                                <tr>
                                  <td>row 3-0</td>
                                  <td>row 3-1</td>
                                  <td>row 3-2</td>
                                </tr>
                                <tr>
                                  <td>row 4-0</td>
                                  <td>row 4-1</td>
                                  <td>row 4-2</td>
                                </tr>
                                <tr>
                                  <td>row 5-0</td>
                                  <td>row 5-1</td>
                                  <td>row 5-2</td>
                                </tr>
                                <tr>
                                  <td>row 6-0</td>
                                  <td>row 6-1</td>
                                  <td>row 6-2</td>
                                </tr>
                                <tr>
                                  <td>row 7-0</td>
                                  <td>row 7-1</td>
                                  <td>row 7-2</td>
                                </tr>
                              <tr>
                                  <td>row 7-0</td>
                                  <td>row 7-1</td>
                                  <td>row 7-2</td>
                                </tr>
                              <tr>
                                  <td>row 7-0</td>
                                  <td>row 7-1</td>
                                  <td>row 7-2</td>
                                </tr>
                              <tr>
                                  <td>row 7-0</td>
                                  <td>row 7-1</td>
                                  <td>row 7-2</td>
                                </tr>
                              </tbody>
                            </table>
                            </div>

</body>
</html>

Please explain why this is answering the OP question – executable Jun 01 '18 at 09:47 — executable, Jun 01 '18 at 09:47

score 0 · Answer 4 · answered Jun 01 '18 at 09:52

0

Please add this CSS : Is working for me

*{ text-align: left; } table{ width: 100%; max-width: 600px; }

answered Jun 01 '18 at 09:52

Dhaval Patel

100
6

Table not resizing columns as per % in colgroup

4 Answers4