Using CSS td width absolute position

Question

Please see this JSFIDDLE  td rhead   width  300px      Why doesn t the CSS width work    lt table gt   lt thead gt   lt tr gt   lt td class  rhead  gt need 300px lt  td gt   lt td colspan  7  gt Week  0 lt  td gt   lt td colspan  7  gt Week  1 lt  td gt   lt  -- etc  -- gt   lt  tr gt   lt tr gt   lt td class  rhead  gt  lt  td gt   lt td gt S lt  td gt  lt td gt M lt  td gt  lt td gt T lt  td gt  lt td gt W lt  td gt  lt td gt T lt  td gt  lt td gt F lt  td gt  lt td gt S lt  td gt   lt td gt S lt  td gt  lt td gt M lt  td gt  lt td gt T lt  td gt  lt td gt W lt  td gt  lt td gt T lt  td gt  lt td gt F lt  td gt  lt td gt S lt  td gt   lt  -- etc    -- gt   lt  tr gt   lt thead gt   lt  table gt    Also  what are the effects of position fixed  absolute etc have on td widths if any  I am looking for a reason more than a fix  I am hoping to understand how it works

User · Answer

Wrap content from first cell in div e g  like that   HTML    lt td gt  lt div class  rhead  gt a little space lt  div gt  lt  td gt    CSS    rhead     width  300px      Here is a jsfiddle

User · Answer

If table width is for example 100   try using a percentage width on td such as 20

User · Answer

My crazy solution      document  ready function            td   each function index         var htmlText     lt div style  width 300px   gt       this  text      lt  div gt          this  html htmlText

User · Answer

You can also use    rhead       width 300px      but this will only with with some browsers  if I remember correctly IE8 does not allow this   Over all  It is safer to just put the width    attribute in the  lt td gt  itself

User · Answer

Try this it work    lt table gt   lt thead gt   lt tr gt   lt td width  300  gt need 300px lt  td gt

User · Answer

The reason  is  because you did not specify the width of the table  and your whole bunch of td s are overflowing   This for example  i ve given the table a width of 5000px  which I thought would fit your requirements   table      width 5000px      It is the exact same code you provided  which I merely added in the table width   I believe what is happening  is because your TD s are way past the default table width  Which you could see  if you pull out about 45 of your td s in each tr   i e  the code you provided in your question  not jsfiddle  it works exactly fine

User · Answer

Try to use  table     table-layout  auto      If you use Bootstrap  class table has table-layout  fixed  by default

User · Answer

The reason it doesn t work in the link your provided is because you are trying to display a 300px column PLUS 52 columns the span 7 columns each   Shrink the number of columns and it works   You can t fit that many on the screen   If you want to force the columns to fit try setting   body  min-width 4150px     see my jsfiddle  http   jsfiddle net Mkq8L 6   mike I can t comment yet

User · Answer

This may not be what you want to hear  but display  table-cell does not respect width and will be collapsed based on the width of the entire table   You can get around this easily just by having a display  block element inside of the table cell itself whose width you specify  e g   lt td gt  lt div style  width  300px   gt wide lt  div gt  lt  td gt    This shouldn t make much of a difference if the  lt table gt  itself is position  fixed or absolute because the position of the cells are all static relative to the table   http   jsfiddle net ExplosionPIlls Mkq8L 4   EDIT  I can t take credit  but as the comments say you can just use min-width instead of width on the table cell instead

User · Answer

You re better off using table-layout  fixed  Auto is the default value and with large tables can cause a bit of client side lag as the browser iterates through it to check all the sizes fit   Fixed is far better and renders quicker to the page  The structure of the table is dependent on the tables overall width and the width of each of the columns   Here it is applied to the original example  JSFIDDLE  You ll note that the remaining columns are crushed and overlapping their content  We can fix that with some more CSS  all I ve had to do is add a class to the first TR        table           width  100           table-layout  fixed              header-row  gt  td           width  100px             td rhead           width  300px         Seen in action here  JSFIDDLE

User · Answer

Use table-layout property and the  fixed  value on your table   table      table-layout  fixed     width  300px     your desired width        After setting up the entire width of the table  you can now setup the width in   of the td s   td nth-child 1   td nth-child 2       width  15         You can learn more about in on this link  http   www w3schools com cssref pr tab table-layout asp

[html] Using CSS td width absolute, position

Examples related to html

Examples related to css

Examples related to html-table