Table with table-layout fixed and how to make one column wider

Question

So I have a table with this style   table-layout  fixed    Which makes all columns to be of the same width  I would like to have one column  the first one  to be wider and then rest of the columns to occupy the remaining width of the table with equal widths   How to achieve that    x000D   x000D  table   x000D    border-collapse  collapse  x000D    width  100   x000D    border  1px solid black  x000D    background   ddd  x000D    table-layout  fixed  x000D    x000D   x000D  table th  table td   x000D    border  1px solid  000  x000D    x000D   x000D  table td wideRow  table th wideRow   x000D    width  300px  x000D    x000D   lt table class  CalendarReservationsBodyTable  gt  x000D     lt thead gt  x000D       lt tr gt  x000D         lt th colspan  97  gt Rezervovane auta lt  th gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt th class  corner wideRow  gt Auto lt  th gt  x000D         lt th class  odd  colspan  4  gt 0 lt  th gt  x000D         lt th class    colspan  4  gt 1 lt  th gt  x000D         lt th class  odd  colspan  4  gt 2 lt  th gt  x000D         lt th class    colspan  4  gt 3 lt  th gt  x000D         lt th class  odd  colspan  4  gt 4 lt  th gt  x000D         lt th class    colspan  4  gt 5 lt  th gt  x000D         lt th class  odd  colspan  4  gt 6 lt  th gt  x000D         lt th class    colspan  4  gt 7 lt  th gt  x000D         lt th class  odd  colspan  4  gt 8 lt  th gt  x000D         lt th class    colspan  4  gt 9 lt  th gt  x000D         lt th class  odd  colspan  4  gt 10 lt  th gt  x000D         lt th class    colspan  4  gt 11 lt  th gt  x000D         lt th class  odd  colspan  4  gt 12 lt  th gt  x000D         lt th class    colspan  4  gt 13 lt  th gt  x000D         lt th class  odd  colspan  4  gt 14 lt  th gt  x000D         lt th class    colspan  4  gt 15 lt  th gt  x000D         lt th class  odd  colspan  4  gt 16 lt  th gt  x000D         lt th class    colspan  4  gt 17 lt  th gt  x000D         lt th class  odd  colspan  4  gt 18 lt  th gt  x000D         lt th class    colspan  4  gt 19 lt  th gt  x000D         lt th class  odd  colspan  4  gt 20 lt  th gt  x000D         lt th class    colspan  4  gt 21 lt  th gt  x000D         lt th class  odd  colspan  4  gt 22 lt  th gt  x000D         lt th class    colspan  4  gt 23 lt  th gt  x000D       lt  tr gt  x000D     lt  thead gt  x000D     lt tbody gt  x000D       lt tr gt  x000D         lt td class  alignRight wideRow  gt KE-260 FC - Octavia combi lt  td gt  x000D         lt td class   borderLeft  gt  lt  td gt  x000D         lt td class  odd  gt  lt  td gt  x000D         lt td class    gt  lt  td gt  x000D         lt td class  odd  gt  lt  td gt  x000D         lt td class   borderLeft  gt  lt  td gt  x000D         lt td class  odd  gt  lt  td gt  x000D         lt td class    gt  lt  td gt  x000D         lt td class  odd  gt  lt  td gt  x000D         lt td class   borderLeft  gt  lt  td gt  x000D         lt td class  odd  gt  lt  td gt  x000D         lt td class    gt  lt  td gt  x000D         lt td class  odd  gt  lt  td gt  x000D         lt td class   borderLeft  gt  lt  td gt  x000D         lt td class  odd  gt  lt  td gt  x000D         lt td class    gt  lt  td gt  x000D         lt td class  odd  gt  lt  td gt  x000D         lt td class   borderLeft  gt  lt  td gt  x000D         lt td class  odd  gt  lt  td gt  x000D         lt td class    gt  lt  td gt  x000D         lt td class  odd  gt  lt  td gt  x000D         lt td class   borderLeft  gt  lt  td gt  x000D         lt td class  odd  gt  lt  td gt  x000D         lt td class    gt  lt  td gt  x000D         lt td class  odd  gt  lt  td gt  x000D         lt td class   borderLeft  gt  lt  td gt  x000D         lt td class  odd  gt  lt  td gt  x000D         lt td class    gt  lt  td gt  x000D         lt td class  odd  gt  lt  td gt  x000D         lt td class   borderLeft  gt  lt  td gt  x000D         lt td class  odd  gt  lt  td gt  x000D         lt td class    gt  lt  td gt  x000D         lt td class  odd  gt  lt  td gt  x000D         lt td colspan  16  class  highlighted borderLeft  title  Richard Knop  gt  x000D          Richard Knop x000D         lt  td gt  x000D         lt td class   borderLeft  gt  lt  td gt  x000D         lt td class  odd  gt  lt  td gt  x000D         lt td class    gt  lt  td gt  x000D         lt td class  odd  gt  lt  td gt  x000D         lt td class   borderLeft  gt  lt  td gt  x000D         lt td class  odd  gt  lt  td gt  x000D         lt td class    gt  lt  td gt  x000D         lt td class  odd  gt  lt  td gt  x000D         lt td class   borderLeft  gt  lt  td gt  x000D         lt td colspan  14  class  highlighted  title  Richard Knop  gt  x000D          Richard Knop x000D         lt  td gt  x000D         lt td class  odd  gt  lt  td gt  x000D         lt td class   borderLeft  gt  lt  td gt  x000D         lt td class  odd  gt  lt  td gt  x000D         lt td class    gt  lt  td gt  x000D         lt td class  odd  gt  lt  td gt  x000D         lt td class   borderLeft  gt  lt  td gt  x000D         lt td class  odd  gt  lt  td gt  x000D         lt td class    gt  lt  td gt  x000D         lt td class  odd  gt  lt  td gt  x000D         lt td class   borderLeft  gt  lt  td gt  x000D         lt td class  odd  gt  lt  td gt  x000D         lt td class    gt  lt  td gt  x000D         lt td class  odd  gt  lt  td gt  x000D         lt td class   borderLeft  gt  lt  td gt  x000D         lt td class  odd  gt  lt  td gt  x000D         lt td class    gt  lt  td gt  x000D         lt td class  odd  gt  lt  td gt  x000D         lt td class   borderLeft  gt  lt  td gt  x000D         lt td class  odd  gt  lt  td gt  x000D         lt td class    gt  lt  td gt  x000D         lt td class  odd  gt  lt  td gt  x000D         lt td class   borderLeft  gt  lt  td gt  x000D         lt td class  odd  gt  lt  td gt  x000D         lt td class    gt  lt  td gt  x000D         lt td class  odd  gt  lt  td gt  x000D       lt  tr gt  x000D     lt  tbody gt  x000D   lt  table gt  x000D   x000D   x000D    jsfiddle  http   jsfiddle net 6p9K3   Notice the first column  I want it to be 300px wide

User · Answer

The important thing of table-layout  fixed is that the column widths are determined by the first row of the table   So   if your table structure is as follow  standard table structure    lt table gt     lt thead gt         lt tr gt             lt th gt  First column  lt  th gt             lt th gt  Second column  lt  th gt             lt th gt  Third column  lt  th gt                 lt  tr gt     lt  thead gt       lt tbody gt         lt tr gt             lt td gt  First column  lt  td gt             lt td gt  Second column  lt  td gt             lt td gt  Third column  lt  td gt                 lt  tr gt     lt  tbody gt        if you would like to give a width to second column then   lt style gt       table          table-layout fixed          width  100              table tr th nth-child 2          width  60            lt  style gt    Please look that we style the th not the td

User · Answer

Are you creating a very large table  hundreds of rows and columns    If so  table-layout  fixed  is a good idea  as the browser only needs to read the first row in order to compute and render the entire table  so it loads faster   But if not  I would suggest dumping table-layout  fixed  and changing your css as follows   table th  table td  border  1px solid  000  width 20px     or something similar       table td wideRow  table th wideRow  width  300px      http   jsfiddle net 6p9K3 1

User · Answer

You could just give the first cell  therefore column  a width and have the rest default to auto   x000D   x000D  table   x000D    table-layout  fixed  x000D    border-collapse  collapse  x000D    width  100   x000D    x000D  td   x000D    border  1px solid  000  x000D    width  150px  x000D    x000D  td td   x000D    width  auto  x000D    x000D   lt table gt  x000D     lt tr gt  x000D       lt td gt 150px lt  td gt  x000D       lt td gt equal lt  td gt  x000D       lt td gt equal lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D      or alternatively the  proper way  to get column widths might be to use the col element itself   x000D   x000D  table   x000D    table-layout  fixed  x000D    border-collapse  collapse  x000D    width  100   x000D    x000D  td   x000D    border  1px solid  000  x000D    x000D   wide   x000D    width  150px  x000D    x000D   lt table gt  x000D     lt col span  1  class  wide  gt  x000D       lt tr gt  x000D         lt td gt 150px lt  td gt  x000D         lt td gt equal lt  td gt  x000D         lt td gt equal lt  td gt  x000D       lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

What you could do is something like this (pseudocode):

<container table>
  <tr>
    <td>
      <"300px" table>
    <td>
      <fixed layout table>

Basically, split up the table into two tables and have it contained by another table.

[html] Table with table-layout: fixed; and how to make one column wider

The answer is

Examples related to html

Examples related to css

Examples related to xhtml

Tags