Search code examples
c#htmlcssasp.net-mvcrazor

Colspan forcibly setting equal column widths

I have a table which has equal column widths like this(say a ratio of 1:1:1): enter image description here

I want to adjust the column widths depending on the header texts(longer header would have more column width and vice versa - something like this(say a ratio of 0.5:0.5:2) : enter image description here

Below is my code for generating the header rows(I'm using ASP.Net MVC Razor syntax helper methods):

 @th.HeaderRow(@<tr>
        <th class="border-bottom" style="width: 300px;" colspan="3">Header Ln 1/th>
    </tr>)

 @th.HeaderRow(@<tr>
        <th style="width: 100px;">Header Ln 2 Col 1</th>
        <th style="width: 100px;">Header Ln 2 Col 3</th>
        <th style="width: 100px;">Header Ln 2 Col 3</th>
    </tr>)
   
 // code for generating the data rows
.....

I am unable adjust the width of these individual columns to unique values(say 50px, 50px, 200px); somehow they are all getting set to the same values because of the colspan.

How can I achieve this?

Solution

  • If you look at your last screenshot, you actually have 4 columns, the first two being their own cells, and the last one spanning two columns. Your header therefore needs to be colspan 4.

    @th.HeaderRow(@<tr>
        <th class="border-bottom" style="width: 300px;" colspan="4">Header Ln 1/th>
    </tr>)