Cell widths in a table of text

How do you get table cell widths to adjust themselves, so that there’s a only a preset gap to the left and right of any text in them please?

Are we talking about HTML tables or CSS tables?

HTML, used with an external css

To get some white space to the left and right, you want to apply padding-left and padding-right to the <td> element.

Tables will automatically adjust column widths so long as you don’t specify a width (either in the HTML or in CSS).

Thanks, am trying the below, but it doesn’t appear to be working? (The table has got a class name of football):

table .football .td {
	padding-left: 100px;
	padding-right: 100px;
	}

Then you either want

table.football td {
	padding-left: 100px;
	padding-right: 100px;
	}

(without a space and without a dot before the td) or just

.football td {
	padding-left: 100px;
	padding-right: 100px;
	}

100px either side is quite a lot of white space. Hopefully there are not too many columns.?

Thank you, thats appreciated. Would that also be applied to the headers and footers.

If by header you mean a <th> tag then yes if that’s how you want it formatted. I’m not sure what you mean by footers though.

Sorry, I meant the bottom row of the table. How would I get that to apply to the th please? Something like this?

.football td  th {
	padding-left: 100px;
	padding-right: 100px;
	}
.football td  th {
	padding-left: 100px;
	padding-right: 100px;
	}

That is targeting a th element which is a child of a td element in the table .football. Is that the structure that you have? If not, you probably just want to remove the td from that declaration (but without seeing your structure, I’m guessing).

These?

1 Like

If you want it to apply to both the td and th elements then the selector would be

.football td, .football th {

You are applying this to all cells (td) and header cells (th) so surely this will include your footer row as well.

1 Like

<tfoot>

Dang. Ain’t never used one of those!

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.