Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

make the table td flexible using css

make the table td flexible using css

Problem

I created a demo. I need some help regarding the flexibility of the Table cells.

I am having some cells for table in which their widths should be fixed.

But the cells consists of labels which can have a long text or a short text.

based on this labels the tables cells should works flexibly. but the condition is the text should come in one line and should not wrap with the other cells text.

css;

td{
    width:100px;
    border:1px solid red;
} 

html:

http://jsfiddle.net/NDMTH/3/

Problem courtesy of: user1853128

Solution

If I understood well, use the property min-width instead of width:

td{
    min-width:100px;
    border:1px solid red;
} 

And white-space:nowrap on label (MDN Reference):

label{
    white-space:nowrap;
    width:100%;
    border:1px solid blue;
}

Working example on JSFiddle.net

Solution courtesy of: Bigood

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

make the table td flexible using css

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×