CODEWITHSUNDEEP
htmltwitter-bootstrap
user1260928
user1260928

Reputation: 3429

html : set column width

I want to set a custom with for each of my columns. But for an unknown reason, if for example I increase col 3 size, col 2 size decreases. Does anyone know why there is this behaviour?

<table class="table" style="table-layout: fixed;width:1165px">
    <thead>
        <th style="width:137px">Col 1</th>
        <th style="width:137px">Col 2</th>
        <th style="width:98px">Col 3</th>
        <th style="width:98px">Col 4</th>
        <th style="width:98px">Col 5</th>
        <th style="width:72px">Col 6</th>
        <th style="width:104px">Col 7</th>
        <th style="width:101px">Col 8</th>
        <th style="width:80px">Col 9</th>
        <th style="width:60px">Col 10</th>
    </thead>
</table>

Thanks.

Upvotes: 1

Views: 42

Answers (1)

Damian W
Damian W

Reputation: 568

The width of all the columns in your code combined is 985px (rather than 1165px).

Rather than using fixed widths using pixels, it would be beneficial to use percentages. Among other advantages, it would also re-size for different screen sizes.

For example...

<table class="table">
    <thead>
        <th style="width: 12%">Col 1</th>
        <th style="width: 12%">Col 2</th>
        <th style="width: 11%">Col 3</th>
        <th style="width: 11%">Col 4</th>
        <th style="width: 11%">Col 5</th>
        <th style="width: 10%">Col 6</th>
        <th style="width: 11%">Col 7</th>
        <th style="width: 10%">Col 8</th>
        <th style="width: 6%">Col 9</th>
        <th style="width: 6%">Col 10</th>
    </thead>
</table>

If you wanted the table itself to have a fixed width, then you can simply add the width style to the whole table: <table class="table" style="width: 1028px"> (changed to the width you're looking for, of course).

Upvotes: 1

Related Questions