Border around the table and not around the rows

HTML & CSS
1

Hi

I am making a table and I just need to make a border around the table outside not inside where all the rows are …
Anyway ideas?
:slight_smile:

2 
table {border:1px solid}
3

nope I needed one that only does a border on the out side of the table not in side aswell ( ie the rows musn’t have border around them at all?

4

In the table markup you have to put


<table border="0">
5

You may need border-collapse: collapse as well.

6

Don’t do this.

1 - You should separate markup and presentational elements using CSS
2 - If you want to apply a border later then you’ll have to edit the HTML instead of making a simple change in CSS
3 - The question was about applying a border so how would border=“0” help?

However, what Tommy said is correct so you may have something else wrong with your code?

Try this

CSS


table {
	border: 1px solid #000000;
}

HTML


<table>
	<thead>
		<tr>
		<th scope="col">table head 1</th>
		<th scope="col">table head 2</th>
		</tr>
	</thead>
		<tr>
			<td>table data 1</td>
			<td>table data 2</td>
		</tr>
		<tr>
			<td>table data 3</td>
			<td>table data 4</td>
		</tr>
</table>

Also, Tyssen’s advice will be applicable if you decide that you want borders on your tr’s or td’s as there will be a margin between the cells by default unless you collapse them.

7

csswiz,

I agreed with AutisticCuckoo This is the correct answer.


table {
border: 1px solid black;
}

But, Apparently the cell lines were still there so the only way I thought this could happen was if the table already had a border=‘1’ there… Alternatively you could delete that markup :slight_smile:

8

Maybe I’m not understanding what you want. :confused:

If you mean that you want top and bottom borders on the table, but no borders on the left or right, then:

table {
  border-style:solid;
  border-width:1px 0;
}
9

Mark, it does sound as though for some reason the td borders are being displayed which as you rightly point out might indicate that there is some markup on the table.

Whilst code would still validate, you shouldn’t really have any styling markup on a table as this can be achieved through CSS. Whether this be padding, margin or borders, remove all styling information from a table and code a table in it’s purest form as my example above and then simply style it as is required through the use of CSS.