Col in table colgroup is getting hidden

Question

I'm trying to develop a fixed header table.It is a kind of widget, where use will be allowed to set width to columns whichever he wants.

Scenario:

Table(width is set to 500px ) has four columns where if we don't specify width at col tag level,all columns are optimized to total table width like this:

If we specify width to 2 columns at col level whose total width is less than table width, then table looks like as follow:

But, if width of the 2 columns are greater than table width, then remaining columns are getting hidden, though table wrapper( <div class="v-grid-content"> ) has overflow:auto .Scrolling is enabled but only two fields are shown:

I am not getting what is wrong, can somebody help. Here is the jsfiddle .

I tried to keep min-width to col ,but that didn't work.

Do we need to set width to every col ??

Answer 1

Do we need to set width to every col?

No, you don't. You can set a width to some – any other column widths will get computed by the browser as usual. (Taking into account the widest content of that column and the overall table width.)