CSS Make one row the width of another

Question

I'm sure this is a fairly common problem but I'm new to CSS so I'm not sure how it's done. I tried searching for the issue but sometimes it's tricky to get the right keywords.

I have a table the width of which I want to be constrained by a specific row. My table css is as follows;

table {
    border: 1px solid #ccc;
    width: auto;
    margin-left: auto;
    margin-right: auto;
}

I have one row which contains cells for which I want the width to autofit and two rows of prose which currently force the table to take 100% width.

How do I constrain the latter to have at most the autofit width of the first row?

If tables aren't the way to go and this should be pure css and divs, how do you get one class to adopt the fixed but unknown width of another?

Thanks,

Gav

Answer 1

try this: http://jsbin.com/osuzu3

table {
    border: 1px solid #ccc;
    width: 100%;
    margin: 0 auto;
    table-layout:fixed
}