CODEWITHSUNDEEP
css
Buttle Butkus
Buttle Butkus

Reputation: 9456

Why is browser showing td's larger than my specified width property?

td width is 162px even though style="width:25px" for td and th

I've put this in my css file

table, td, th {
    border: 1px solid black;
}
table {
    border-collapse:collapse;
}

table.narrow th, td {
    width:50px;
}

It doesn't work. The last one there is supposed to take a table with class="narrow" and make all its descendent th and td elements 50px wide. And chrome shows Matched CSS Rules:

.narrow th, td { width: 50px; }

So chrome is reading it and ignoring it? Or CSS is just idiotic? Or I am? Why can't CSS just do what you tell it, like a normal programming language?

SO, I tried putting style="width:25px" right in the 1st column td AND th tags and still, doesn't work. Chrome shows: 

element.style { width:25px; }

but it won't tell me why the hell it's displaying it at 162px.

Anyone have any clues? Thank you.

Edit: Kolink gave me the clue I needed. Form text fields inside the tags were causing a large minimum width. I added this style to shrink the table:

.narrow input{
  width:80px;
}

It reduced the width of all the inputs inside the class="narrow" table and hence reduced the width of the table.

Upvotes: 17

Views: 16983

Answers (2)

Gael
Gael

Reputation: 634

Your definition is for all TDs

table.narrow th, td {
    width:50px;
}

You have to repeat the affected element in the enumeration

table.narrow th, table.narrow td {
    width:50px;
}

Upvotes: 3

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324620

Set table-layout: fixed; on the table's styles. Otherwise table layout is loose and width is treated more like min-width.

Upvotes: 29

Related Questions