HTML: Make table column width fixed

Question

I have a HTML Table with a very large number of columns. Now, I want to be able to specify the width of the columns - The first column should be of 600px and every corresponding column should be of the width of 200px.

Currently, what happens is that all the columns get cramped into the width of my screen instead of being 200px wide and allowing me to scroll.

I'm using HTML_Table

This is my code:

<head>
    <link rel="stylesheet" type="text/css" href="table.css">
    <style>
    #table_format {
        border-collapse: collapse;
        font-family: Helvetica, Arial, sans-serif;
        font-size: 16px;
        font-style: normal;
        border: 1px solid black;
        overflow-x: auto;    
    }

    #table_format th {
        padding: 5px;
        font-size: 1.2em;
        text-align: left;
        border-bottom: 1px solid black;
        background-color: #F2C545;
    }

    #table_format td {
        padding: 5px;
    }

    </style>
</head>
....
Some other code here
....    
    <?php

    require_once "HTML/Table.php";
    $table = new HTML_Table(array("id"=>"table_format"));
    $firstColumnStyle=array('width' => '600');
    $subsequentColumnStyle=array('width' => '200');

    ....
    ....
    Other code to print values here
    ....
    ....
    $table->updateColAttributes(0, $firstColumnStyle, null);
    for ($cols = 1; $cols <= count($arr1); $cols++)
    {
        $table->updateColAttributes($cols, $subsequentColumnStyle);
    }
    echo $table->toHtml();

When I inspect element, I am able to see that the first column has a width of 600 and all others have 200. But the width isn't actually getting reflected when I render the page.

enter image description here

I don't want to put the table in a wrapper and set the wrapper's width to a static value because of these two reasons:

1. I don't know how many columns I have.
2. The scrollbar in the wrapper appears at the very bottom after all the rows, and to access the scrollbar, one needs to scroll to the very bottom. I'd rather have the horizontal scroll on the page rather than on the wrapper

.

Is there any way I can achieve this?

@MatjažMav, is there any way to specify the size of the second column as well? For example, I want first column to be 600, second to be 100, and third onwards to be 200 — Randomly Named User
– Randomly Named User, Commented Jul 5, 2015 at 7:47

ScaisEdge · Accepted Answer · 2015-07-05 06:08:59Z

2

Try adding to your setting this:

#table_format {
  table-layout: fixed;
}

From MDN Table layout fixed Table and column widths are set by the widths of table and col elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths.

answered Jul 5, 2015 at 6:08

ScaisEdge

133k10 gold badges98 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Randomly Named User Over a year ago

This didn't work, scaisEdge, but the comment posted by @Matjaz worked. :) jsfiddle.net/msdspjpu

Randomly Named User · Accepted Answer · 2015-07-05 07:25:11Z

0

I needed to use the min-width property for the first-child. Here's the working solution. https://jsfiddle.net/msdspjpu/

tr > td {
    min-width: 200px;
    border: 1px solid black;
}
tr > td:first-child {
    min-width: 600px;
}

Thank you, @Matjaz, for the answer.

answered Jul 5, 2015 at 7:25

Randomly Named User

1,9597 gold badges27 silver badges49 bronze badges

Collectives™ on Stack Overflow

HTML: Make table column width fixed

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related