CODEWITHSUNDEEP
javascripthtmlcss
user1853128
user1853128

Reputation: 1114

make the table td flexible using css

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:

<table>
    <tr>
        <td>
            <label>asjkdkasdhadhakdhad asdjkaskdhaksdhakdhakd askdhaskdhakdhakdjad akssdhadkhakd </label>
        </td>
        <td>
            <label>an </label>
        </td>
    </tr>


</table>

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

Upvotes: 0

Views: 1724

Answers (1)

Maen
Maen

Reputation: 10698

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

Upvotes: 1

Related Questions