Can't set column width in widescreen mode

Thus, my table has about 100 columns. My problem is that I cannot set the width of the first column at all unless I remove multiple columns or remove all of the header text in tags <TH></TH>

, which is obviously not a solution

The width of the table is limited by the width of the container. Do I need to specify the width of the first column at all in a very wide table?

I tried style="width:200px !important"

in tags TH

and TD

but didn't work

thank

UPDATE

Here's a jsFiddle - http://jsfiddle.net/16p66fxu/

+3


source to share


3 answers


Specifying the exact width in a table with so much content will never work "correctly" by default, since you only specified the default table sizing algorithm. If you need precise power across the width of all cells, simply turn off smart calibration:

table {
  table-layout:fixed;
}

      

Docs:



The width of the table and column is set by the width of the table and col elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths.

According to the "fixed" layout method, the entire table can be displayed once the first table has been loaded and parsed. This may speed up, then "auto" layout, and then the contents of the cell may not fit the set column widths. Any cell that has content that overflows uses the overflow property to determine whether to trim the overflow content.

While it's the default auto

, your best bet is to provide hints to automatically detect the browser size.

Read more about table-layout

here
.

+3


source


table { table-layout: fixed; width:100%; }

and you need to use style min-width:500px

instead of style width

. DEMO



0


source


This problem is complex but can be solved. As @Hamix wrote, min-width

should be used, not width

. But table{width:100%;}

you don't need to set it, because with a wide table this will ruin the layout, since the table must be wider than the browser window, with a horizontal scroll bar. Also, when the table is 100% wide, it width

works just fine. The problem is that with large tables it width

doesn't work on the table element.

As @Niels_Keurentjes wrote, the first row of the table defines the layout of the column width. I was unable to use tags <col>

to explicitly specify the column widths. But an alternative would be to use a longer column header name to force a wider column for example. using underscores, but this would most often be an ugly hack.

Another alternative is to place the column header in a div like: <th><div>Abcdef</div></th>

and style the div in css (or inline) with width:150px

.

Below are the example files I experimented with to do this:

t.css:

.longtext{
min-width:150px;
}

table{
  /*width: 100%;*/
  table-layout: fixed;
  border-collapse: collapse;
}

table,th,td{
  border: 1px solid black;
}

      

sampletable.html:

<html>
    <head>
        <link href="t.css" rel="stylesheet" type="text/css" media="all">
    </head>
    <body>
        <table>
            <colgroup>
                <col></col>
                <col></col>
                <col></col>
                <col style="width: 200px; background-color:yellow;"></col>
                <col></col>
                <col></col>
                <col></col>
                <col></col>
                <col></col>
                <col></col>
                <col></col>
                <col></col>
                <col></col>
                <col></col>
                <col></col>
            </colgroup>
            <tr>
                <th>ColumnHeader</th>
                <th>ColumnHeader</th>
                <th>ColumnHeader</th>
                <th  class="longtext"><div class="longtextxx">Saying</div></th>
                <th>ColumnHeader</th>
                <th>ColumnHeader</th>
                <th>ColumnHeader</th>
                <th>ColumnHeader</th>
                <th>ColumnHeader</th>
                <th>ColumnHeader</th>
                <th>ColumnHeader</th>
                <th>ColumnHeader</th>
                <th>ColumnHeader</th>
                <th>ColumnHeader</th>
                <th>ColumnHeader</th>
                <th>ColumnHeader</th>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>Shoot first, ask questions later</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
                <td>10</td>
                <td>11</td>
                <td>12</td>
                <td>13</td>
                <td>14</td>
                <td>15</td>
                <td>16</td>
            </tr>
        </table>
    </body>
</html>

      

0


source







All Articles