Search code examples
csshtml-tablewidth

Table column width when having rowspan and table-layout fixe

I'm stuck with fixing the width of the second column of my html table.

Below is a printscreen of my table:

Table Image

Below is the CSS code: 

#RevenueMTable tbody, #RevenueMTable thead {
display: block; 
}

#RevenueMTable {
    width: 1115px;
    table-layout: fixed !important;
}

#RevenueMTable tbody td:first-child
{
    width: 138px !important;
}

#RevenueMTable tbody td:not(:first-child)
{  
    width: 72px !important;

}

#RevenueMTable tbody
{
   overflow: auto;
   height: 400px;

}

The problem is that my first column has a rowspan of 4 rows. Therefore, for example the cell containing "COST" is the first TD element in the row tag and therefore is applied as well a width of 138px, although it should be seen as the second column.

Table HTML code

How can I fix this?

I tried applying column definition width as follows, but does not work either:

 $( '<col style="width:138px"><col style="width:72px"><col style="width:72px"><col style="width:72px"><col style="width:72px"><col style="width:72px"> <col style="width:72px"><col style="width:72px"><col style="width:72px"><col style="width:72px"><col style="width:72px"><col style="width:72px"><col style="width:72px"><col style="width:72px">').insertBefore( $("#RevenueMTable thead") )
Solution

  • You already have classes on your TD elements. You can target the column directly using those. I changed the order of the rules so they will override properly based on specificity.

    #RevenueMTable tbody td
{  
    width: 72px !important;

}

#RevenueMTable tbody td.column0 {
    width: 138px !important;
}