CODEWITHSUNDEEP
htmlcss
bumbumpaw
bumbumpaw

Reputation: 2528

Set width of table td the same as its content

How to set width of table td the same as its content without changing table behavior.

I want the table to have 100% width but table td tends to expand. see image below.enter image description here

And then I try to add td style = "width:120px" and I get my wanted result for the label and input field to just as not to far away from each other,see image below. enter image description here To get my wanted result, do i need to define width for table td or is there any simple way around without hard-coded width? so in the case I have another table with long label like Another long label One: ,I would not have to set another approximately 300px for it's table td. Any help is so much aprreciated.

see also Fiddle demo

Upvotes: 0

Views: 92

Answers (3)

Van Le
Van Le

Reputation: 26

If the width:"auto" did not work for you.

Try adding another pair of <td></td> to each of the <tr></tr> in the table and add this to the CSS for example

table td {
min-width : 160px;
}

JSFiddle demo

Upvotes: 0

Stickers
Stickers

Reputation: 78796

You could do it like the following, to ensure the 2nd column always get the maximum width that is available.

table {
    border-collapse: collapse;
    width: 100%;
    white-space: nowrap;
}
table td {
    border: 1px solid green;
}
table td:last-child {
    width: 100%;
}

http://jsfiddle.net/nmwpqznk/1/

Upvotes: 1

Phiter
Phiter

Reputation: 14967

Use width:"auto" instead.

It will fit automatically depending on the content.

Upvotes: 0

Related Questions