Adjust table column width to content size

html css css-tables
Rui Carneiro picture Rui Carneiro · Mar 29, 2010 · Viewed 119.9k times · Source

Form (with firebug highlight hover the td):

example

Label column CSS:

width: auto;
padding: 0;
margin: 0;

The problem:

Why my left columns have that invisible "padding-right"? It's not possible to shrink columns to fit their content?

--EDIT--

The problem was the table itself. I defined table with "width: 100%". Removed that and the problem is gone.

Answer

Rui Carneiro picture Rui Carneiro · Mar 29, 2010

The problem was the table width. I had used width: 100% for the table. The table columns are adjusted automatically after removing the width tag.

Related questions

CSS Cell Margin

In my HTML document, I have a table with two columns and multiple rows. How can I increase the space in between the first and second column with css? I've tried applying "margin-right: 10px;" to each of the cells on …

Read More
What replaces cellpadding, cellspacing, valign, and align in HTML5 tables?

In Visual Studio, I'm seeing these warnings: Validation (HTML 5): Attribute 'cellpadding' is not a valid attribute of element 'table'. Validation (HTML 5): Attribute 'cellspacing' is not a valid attribute of element 'table'. Validation (HTML 5): Attribute 'valign' is not a valid attribute …

Read More
Border around specific rows in a table?

I'm trying to design some HTML/CSS that can put a border around specific rows in a table. Yes, I know I'm not really supposed to use tables for layout but I don't know enough CSS to completely replace it …

Read More