Setting table column width

Question

I ve got a simple table that is used for an inbox as follows    lt table border  1  gt           lt tr gt               lt th gt From lt  th gt               lt th gt Subject lt  th gt               lt th gt Date lt  th gt           lt  tr gt    How do I set the width so the From and Date are 15  of the page width and the Subject is 70   I also want the table to take up the whole page width

User · Answer

Alternative way with just one class while keeping your styles in a CSS file, which even works in IE7:

<table class="mytable">
    <tr>
        <th>From</th>
        <th>Subject</th>
        <th>Date</th>
    </tr>
</table>
<style>
    .mytable td, .mytable th { width:15%; }
    .mytable td + td, .mytable th + th { width:70%; }
    .mytable td + td + td, .mytable th + th + th { width:15%; }
</style>

More recently, you can also use the nth-child() selector from CSS3 (IE9+), where you'd just put the nr. of the respective column into the parenthesis instead of stringing them together with the adjacent selector. Like this, for example:

<style>
    .mytable tr > *:nth-child(1) { width:15%; }
    .mytable tr > *:nth-child(2) { width:70%; }
    .mytable tr > *:nth-child(3) { width:15%; }
</style>

User · Answer

Here s another minimal way to do it in CSS that works even in older browsers that do not support  nth-child and the like selectors  http   jsfiddle net 3wZWt    HTML    lt table gt       lt tr gt           lt th gt From lt  th gt           lt th gt Subject lt  th gt           lt th gt Date lt  th gt       lt  tr gt       lt tr gt           lt td gt Dmitriy lt  td gt           lt td gt Learning CSS lt  td gt           lt td gt 7 5 2014 lt  td gt       lt  tr gt   lt  table gt    CSS   table       border-collapse  collapse      width  100      tr  gt          border  1px solid  000     tr  gt  th   th       width  70      tr  gt  th   th   th       width  15

User · Answer

Don t use the border attribute  use CSS for all your styling needs    lt table style  border 1px  width 100    gt       lt tr gt               lt th style  width 15    gt From lt  th gt               lt th style  width 70    gt Subject lt  th gt               lt th style  width 15    gt Date lt  th gt       lt  tr gt      rest of the table code     lt  table gt    But embedding CSS like that is poor practice - one should use CSS classes instead  and put the CSS rules in an external CSS file

User · Answer

style  column-width 300px white-space  normal

User · Answer

Add colgroup after your table tag  Define width and number of column here  and add tbody tag  Put your tr inside of tbody    lt table gt       lt colgroup gt          lt col span  1  style  width  30    gt          lt col span  1  style  width  70    gt       lt  colgroup gt         lt tbody gt           lt tr gt               lt td gt First column lt  td gt               lt td gt Second column lt  td gt           lt  tr gt       lt  tbody gt   lt  table gt

User · Answer

x000D   x000D  table     width  100     border  1px solid  000    th from  th date     width  15    th subject     width  70      Not necessary  since only 70  width remains      x000D   lt table gt     lt thead gt       lt tr gt         lt th class  from  gt From lt  th gt         lt th class  subject  gt Subject lt  th gt         lt th class  date  gt Date lt  th gt       lt  tr gt     lt  thead gt     lt tbody gt       lt tr gt         lt td gt  from  lt  td gt         lt td gt  subject  lt  td gt         lt td gt  date  lt  td gt       lt  tr gt     lt  tbody gt   lt  table gt  x000D   x000D   x000D   The best practice is to keep your HTML and CSS separate for less code duplication  and for separation of concerns  HTML for structure and semantics  and CSS for presentation   Note that  for this to work in older versions of Internet Explorer  you may have to give your table a specific width  e g   900px   That browser has some problems rendering an element with percentage dimensions if its wrapper doesn t have exact dimensions

User · Answer

Depending on your body  or the div which is wrapping your table   settings  you should be able to do this   body     width  98      table     width  100       th     border  1px solid black      th From  th Date     width  15      th Date     width  70        lt table gt     lt thead gt       lt tr gt         lt th class  From  gt From lt  th gt         lt th class  Subject  gt Subject lt  th gt         lt th class  Date  gt Date lt  th gt       lt  tr gt      lt  thead gt      lt tbody gt        lt tr gt          lt td gt Me lt  td gt          lt td gt Your question lt  td gt          lt td gt 5 30 2009 2 41 40 AM UTC lt  td gt        lt  tr gt      lt  tbody gt   lt  table gt    Demo

User · Answer

lt table gt     lt col width  130  gt     lt col width  80  gt     lt tr gt       lt th gt Month lt  th gt       lt th gt Savings lt  th gt     lt  tr gt     lt tr gt       lt td gt January lt  td gt       lt td gt  100 lt  td gt     lt  tr gt     lt tr gt       lt td gt February lt  td gt       lt td gt  80 lt  td gt     lt  tr gt   lt  table gt    Demo

User · Answer

x000D   x000D   lt table style  width  100   gt  x000D       lt colgroup gt  x000D          lt col span  1  style  width  15    gt  x000D          lt col span  1  style  width  70    gt  x000D          lt col span  1  style  width  15    gt  x000D       lt  colgroup gt  x000D       x000D       x000D       x000D       lt  -- Put  lt thead gt    lt tbody gt   and  lt tr gt  s here  -- gt  x000D       lt tbody gt  x000D           lt tr gt  x000D               lt td style  background-color   777  gt 15  lt  td gt  x000D               lt td style  background-color   aaa  gt 70  lt  td gt  x000D               lt td style  background-color   777  gt 15  lt  td gt  x000D           lt  tr gt  x000D       lt  tbody gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

These are my two suggestions    Using classes  There is no need to specify width of the two other columns as they will be set to 15  each automatically by the browser    x000D   x000D      table   table-layout  fixed    x000D       subject   width  70     x000D       lt table gt  x000D         lt tr gt  x000D           lt th gt From lt  th gt  x000D           lt th class  subject  gt Subject lt  th gt  x000D           lt th gt Date lt  th gt  x000D         lt  tr gt  x000D       lt  table gt  x000D   x000D   x000D   Without using classes  Three different methods but the result is identical   a    x000D   x000D      table   table-layout  fixed    x000D      th th   width  70     x000D      th th th   width  15     x000D       lt table gt  x000D         lt tr gt  x000D           lt th gt From lt  th gt  x000D           lt th gt Subject lt  th gt  x000D           lt th gt Date lt  th gt  x000D         lt  tr gt  x000D       lt  table gt  x000D   x000D   x000D    b    x000D   x000D      table   table-layout  fixed    x000D      th nth-of-type 2    width  70     x000D       lt table gt  x000D         lt tr gt  x000D           lt th gt From lt  th gt  x000D           lt th gt Subject lt  th gt  x000D           lt th gt Date lt  th gt  x000D         lt  tr gt  x000D       lt  table gt  x000D   x000D   x000D    c  This one is my favourite  Same as b  but with better browser support    x000D   x000D      table   table-layout  fixed    x000D      th first-child th   width  70     x000D       lt table gt  x000D         lt tr gt  x000D           lt th gt From lt  th gt  x000D           lt th gt Subject lt  th gt  x000D           lt th gt Date lt  th gt  x000D         lt  tr gt  x000D       lt  table gt  x000D   x000D   x000D

User · Answer

Try this instead    lt table style  width  100   gt       lt tr gt           lt th style  width  20   gt             column 1          lt  th gt           lt th style  width  40   gt             column 2          lt  th gt           lt th style  width  40   gt             column 3          lt  th gt       lt  tr gt       lt tr gt           lt td style  width  20   gt             value 1          lt  td gt           lt td style  width  40   gt             value 2          lt  td gt           lt td style  width  40   gt             value 3          lt  td gt       lt  tr gt   lt  table gt

User · Answer

x000D   x000D      table   table-layout  fixed    x000D       subject   width  70     x000D       lt table gt  x000D         lt tr gt  x000D           lt th gt From lt  th gt  x000D           lt th class  subject  gt Subject lt  th gt  x000D           lt th gt Date lt  th gt  x000D         lt  tr gt  x000D       lt  table gt  x000D   x000D   x000D

User · Answer

Use the CSS below  the first declaration will ensure your table sticks to the widths you provide  you ll need to add the classes in your HTML    table    table-layout fixed    th from  th date     width  15     th subject    width  70

[html] Setting table column width

Examples related to html

Examples related to css

Examples related to html-table