• Some users have recently had their accounts hijacked. It seems that the now defunct EVGA forums might have compromised your password there and seems many are using the same PW here. We would suggest you UPDATE YOUR PASSWORD and TURN ON 2FA for your account here to further secure it. None of the compromised accounts had 2FA turned on.
    Once you have enabled 2FA, your account will be updated soon to show a badge, letting other members know that you use 2FA to protect your account. This should be beneficial for everyone that uses FSFT.

CSS table help

O

owkia

Supreme [H]ardness
Joined
May 27, 2007
Messages
5,405
So I'm trying to format a simple table using CSS. Everything looks great with two problems. One, there is only a border around the whole table with whitespace dividing each cell. Second, the padding command doesn't do anything so my text is smashed up against what borders are there.

edit:
One other problem I just came across. When adding a 'body' class in and using background-color to apply a background color to the whole page, it only applies that color to the height of the table and not the whole page. What's up with that?

Here's what I have for the CSS:

Code: 
table{width: 800px;
	border: 1px solid black;
	padding: 2px;
	border-collapse: collapse;}
td.1{border: 1px solid black;
       width: 200px;}
td.2{border: 1px solid black;
       width: 360px;}
td.3{border: 1px solid black;
       width: 240px;}

I glanced through to make sure I wasn't missing any punctuation. What am I missing here?

Thanks for any help.
 
If I'm understanding you correctly, the first problem is you want a border around the table and around each cell. You need a general td in there to apply the border to all cells.
Also, the padding needs to be on the td as well.
Code: 
<html>
<head>
<style type="text/css">
body{background-color:#C5C5C5;}
table{width: 800px;
	border: 1px solid black;
	border-collapse: collapse;}
td{border: 1px solid black;
        padding:2px;}
td.1{width: 200px;}
td.2{width: 360px;}
td.3{width: 240px;}
</style>
</head>
<body>
<table>
	<tr>
		<td>Generic Cell</td>
		<td class="1">Class 1</td>
		<td class="2">Class 2</td>
		<td class="3">Class 3</td>
	</tr>
	<tr>
		<td>Generic Cell</td>
		<td class="1">Class 1</td>
		<td class="2">Class 2</td>
		<td class="3">Class 3</td>
	</tr>
</table>
</body>
</html>

The background color changes the whole page color as well. What does your HTML look like?

Also, the width property doesn't seem to work in Chrome, but works in IE.
 
Excellent, it's all working now. The width command also works fine in Firefox. As for the background color, the teacher had us working with xhtml files, which seemed to cause the problem. I simply changed the filename to an html file and the background is all one color. Since he wants the file uploaded as html anyway, this works out fine.

Thank you very much for the quick help.
 
You must log in or register to reply here.
Back
Top