I am a casual CSS user.
I had a table that did not work as expected because the browser adds the width of the widest cells in various rows to render the table and this occasionally created an overflow that triggers a completely unwanted scrollbar.

The solution is, I think, to make each row of my old table a table in itself but I need the cells that are containing text to be only expandable to the width of the text, plus small margins, which is sometime a single word and I need these cells to occupy only a portion of the available width.

If there is only one cell containing text in a row, I need it to use 66% of the available width at the most and have the remaining width spread evenly between a cell on the left and one on the right.

If I have 2 cells that have text, I need them to have at least an empty cell of 20% of the width between them.

And if there is 3 cells with text (the maximum), I need them to have a cell of 16 pixels between them.

Also, these tables should appear as a single table, the first table should have a top border as well as a left and right border, but no bottom border. The last cell should have a bottom border as well as a left and right border. And the tables in the middle should only have a left and a right border.

My question: what is the best way to obtain this result with CSS?
A few examples will probably save me days of trials and errors.

Thank you for your help.

Read the CSS documentation at http://www.w3.org/Style/CSS/

[removed link]

If I remember correctly, CSS won't handle every variable that can be applied to tables.

An editor like Bluefish is very handy for reminding you what you can and cannot do in various situations.

Thank you to pixellani, that's probably my biggest problem, to know what is doable. I never thought an editor could help in that regard. I'll follow your suggestion.

If someone could tell me what is not doable in CSS from what I explained above, that will be a big help.