Fixed Table Cell Width

Question

A lot of people still use tables to layout controls  data etc  - one example of this is the popular jqGrid  However  there is some magic happening that I cant seem to fathom  its tables for crying out loud  how much magic could there possibly be    How is it possible to set a table s column width and have it obeyed like jqGrid does   If I try to replicate this  even if I set every  lt td style  width  20px  gt   as soon as the content of one of those cells is greater than 20px  the cell expands   Any ideas or insights

User · Answer

table        table-layout fixed  width 200px    table tr       height  20px      10x10

User · Answer

Now in HTML5 CSS3 we have better solution for the problem  In my opinion this purely CSS solution is recommended    x000D   x000D  table fixed  table-layout fixed  width 90px    Setting the table width is important    x000D  table fixed td  overflow hidden    Hide text outside the cell    x000D  table fixed td nth-of-type 1   width 20px    Setting the width of column 1    x000D  table fixed td nth-of-type 2   width 30px    Setting the width of column 2    x000D  table fixed td nth-of-type 3   width 40px    Setting the width of column 3    x000D   lt table class  fixed  gt  x000D       lt tr gt  x000D           lt td gt Veryverylongtext lt  td gt  x000D           lt td gt Actuallythistextismuchlongeeeeeer lt  td gt  x000D           lt td gt We should use spaces tooooooooooooo lt  td gt  x000D       lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D    You need to set the table s width even in haunter s solution  Otherwise it doesn t work  Also a new CSS3 feature that vsync suggested is  word-break break-all   This will break the words without spaces in them to multiple lines too  Just modify the code like this   table fixed   table-layout fixed  width 90px  word-break break-all     Final result

User · Answer

I had one long table td cell  this forced the table to the edges of the browser and looked ugly  I just wanted that column to be fixed size only and break the words when it reaches the specified width  So this worked well for me    lt td gt  lt div style  width  150px   gt Text to break here lt  div gt  lt  td gt    You don t need to specify any kind of style to table  tr elements  You may also use overflow hidden  as suggested by other answers but it causes for the excess text to disappear

User · Answer

table td      table-layout fixed    width 20px    overflow hidden    word-wrap break-word

User · Answer

table     table-layout fixed    td th     width 20px     word-wrap break-word       first-child      nth-child 1  or

User · Answer

for FULLSCREEN width table    table width MUST be 100  if need N colunms  then THs MUST be N 1   example for 3 columns   x000D   x000D  table fixed   x000D        table-layout  fixed  x000D        width  100   x000D        x000D      table fixed td   x000D        overflow  hidden  x000D        x000D     lt table class  fixed  gt  x000D         lt col width 20   gt  x000D         lt col width 20   gt  x000D         lt col width 20   gt  x000D       lt tr gt  x000D         lt th gt 1 lt  th gt  x000D         lt th gt 2 lt  th gt  x000D         lt th gt 3 lt  th gt  x000D         lt th gt FREE lt  th gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt text111111111 lt  td gt  x000D         lt td gt text222222222 lt  td gt  x000D         lt td gt text3333333 lt  td gt  x000D       lt  tr gt  x000D     lt  table gt  x000D   x000D   x000D

User · Answer

You could try using the  lt col gt  tag manage table styling for all rows but you will need to set the table-layout fixed style on the  lt table gt  or the tables css class and set the overflow style for the cells http   www w3schools com TAGS tag col asp  lt table class  quot fixed quot  gt       lt col width  quot 20px quot    gt       lt col width  quot 30px quot    gt       lt col width  quot 40px quot    gt       lt tr gt           lt td gt text lt  td gt           lt td gt text lt  td gt           lt td gt text lt  td gt       lt  tr gt   lt  table gt   and this be your CSS table fixed   table-layout fixed    table fixed td   overflow  hidden

[html] Fixed Table Cell Width

Examples related to html

Examples related to css

Examples related to layout

Examples related to html-table