Question over applying styles to tfoot, thead, tbody

HTML & CSS
1

I’m trying to style a shopping cart but none of my css seems to change the appearance at all in terms of layout. I want to increase the margin space between tbody & tfoot but can’t seem to be able to do it’ I’ve also tried adding padding to subtotal but the table doesn’t seem to allow me to do this either.

CSS:



#cart, #cartFooter {color:#FFFFFF; text-align:left;}
#cart tr td, #cartFooter tr td {color:#FFFFFF; font-size:12px;}
thead {font-size:15px; font-weight:bold; border:1px solid red; background-color:#ccc;}
tfoot {margin-top:60px;}
.quantity input {	font-size: 10px;
	padding: 3px;
	color: #333333;
	background-color: #ffffff;
	float:left;
	margin: 0px 0px 0px 0px;
	border-style:solid;
	border-color: #999999;
	border-width: 1px;
	text-align:right;
}
.item {border:0px solid red;}
.price {border:0px solid red; width:100px; text-align:right; }
.cost {border:0px solid red; text-align:right;}
.quantity {border:0px solid red; width:40px; text-align:right;}
.subtotal {padding:50px;}

HTML

<table id="cart" cellpadding="5" cellspacing="5">
					<thead>
						<tr>
							<th class="item">Item</th>
							<th class="quantity">Qty</th>
							<th class="price">Price</th>
							<th class="cost">Total</th>

						</tr>
					</thead>
					<tbody><tr>
					<td class="item" width="500">HPI SFL-10 MG SERVO METAL GEAR</td>
					<td class="quantity"><input size="3" name="qty_80589" id="80589" value="1" maxlength="3" type="text"></td>
					<td class="price">€43.82</td>
					<td class="cost">€43.82</td>

				 </tr></tbody>
	
	
			 <tfoot>
				<tr class="subtotal">
					<td class="item" width="500">Subtotal</td>
					<td class="quantity"></td>
					<td class="price"></td>
					<td class="cost">€43.82</td>
				</tr>

				<tr class="tax">
					<td class="item" width="500">VAT</td>
					<td class="quantity"></td>
					<td class="price">15%</td>
					<td class="cost">€6.57</td>
				</tr>
				<tr class="shipping">

					<td class="item" width="500">Shipping</td>
					<td class="quantity">1</td>
					<td class="price"></td>
					<td class="cost"></td>
				</tr>
				<tr class="total">
					<td class="item" width="500">Total</td>

					<td class="quantity"></td>
					<td class="price"></td>
					<td class="cost">€50.39</td>
				</tr>
				<tr class="actions">
					<td></td>
					<td><input style="display: none;" name="recalculate" value="Recalculate" id="recalculate" type="button"></td>
					<td></td>

					<td><input name="submit" value="Place Order" id="submit" type="submit"></td>
				</tr>
			</tfoot>
		</table>
2

Hi,

You can’t style the tfoot, thead, tbody elements as they just group parts of the table together.

You would need to style the cells themselves.

e.g.


[B]tr.subtotal td {padding-top:50px;}[/B]

Note that you have a lot of errors in that short snippet.:slight_smile:

The tfoot element should be positioned next to the thead element in the html and then followed by the tbody element.

You also have ids starting with a digit which is invalid.

Run the code through the validator and tidy those errors up :slight_smile:

3

That’s because internal table objects do not have any margins (source).