Problems with Table Borders

This is driving me crazy?! :nono:

How do I get a Border on my HTML Table as follows…

  • Table has border on all 4 sides
  • Table Header <th> has border on all 4 sides
  • Table Cells <td> have no borders except where overridden above.

Here is a stripped down version of my Table…


	<table border="1"  cellspacing="1">
		<thead>
			<!-- Header Bar -->
			<tr>
				<td id="headerBar" colspan="5">
					<!-- Message Actions -->
					<select name="pmAction"></select>

					<!-- Submit Button -->
					<input type="submit" name="submit" value="Go"/>
				</td>
			</tr>

			<!-- Column Headings -->
			<tr>
				<th class="colSelect" />
					<input id='selectAll' name='selectAll' type='checkbox' value='TRUE' />
				</th>
				<th id="colFlag"></th>
				<th id="colFrom">From</th>
				<th id="colSubject">Subject</th>
				<th id="colDate">Date</th>
			</tr>
		</thead>

		<!-- Body Data -->
		<tbody>
			<tr>
				<td class='colSelect'>
					<input id="" name="" type="checkbox" value="TRUE" />
				</td>
				<td class='colFlag'></td>
				<td>$fromUsername</td>
				<td>$subject</td>
				<td>$sentOn</td>
			</tr>
		</tbody>
	</table>

And the Border should be…

	border: 1px solid #AAA;

I tried setting the Border on <table> and <th> and left <td> blank and also with a white border but am getting funky results?! :-/

Thanks,

Debbie

Try this:


table, th {
	border: 1px solid #aaa;
	border-collapse: collapse;
}

td {border: none;}

That actually removes the outside border from around the Table and the Column Headings have no inside borders, and the main area in the <tbody> has no borders at all… :-/

Debbie

In my browser, it creates what I pictured from your description: a 1px border around the table and around each <th>.

I’m not really sure what you want visually.

Ralph,

Looks like your suggestion is working now.

A few things…

1.) Sometimes my browser gets really weird in how it caches things, and changes won’t show up until way down the road.

2.) I had an extraneous double <body> tag that may have been causing some issues.

3.) What do you think about how my Inbox now looks with your help?

Would it look better…

3a.) As-Is?

3b.) With additional vertical borders to distinguish columns?

3c.) With all inside borders on?

Thanks,

Debbie

P.S. How would I style things so I get a 1px gray border between columns in the Table Body but no horizontal lines (3b)??

I like the clean, simple look of it. I’m not an ace with visual design, but a simple, elegant style like that pleases my eye.

Would it look better…

I have to see it to decide. But if things stay pretty much as in the screen shot, it looks pretty clear as is.

How would I style things so I get a 1px gray border between columns in the Table Body but no horizontal lines

Probably the simplest way is to do something like

td {border-right: 1px solid #aaa;}

Then you could either add a class to each td at the end of a row and override that with border-right: none; … or use no classes but some fancier CSS3 selectors (last-child etc) … or perhaps not have a right-hand border on the table itself … etc.

You’ll need some left padding on the cells if you put in that border.