Table With just the outside Border Showing

HTML & CSS
1

I am trying to construct a table with just the outside border showing.

I thought it would be

tableheader1851 {border:1px solid #000}
tableheader1851 td,th {border:none}

But that gets rid of everything and doesn’t leave the outside border

From my html

And the page

http://www.c5d.co.uk/descriptionworkhouse1851.php

Where am I going awry?

2

You are only styling the header, is it the header you want the border around or the whole table?

border: 1px solid black;
3

I want the border around the whole table, but I do not want the cells inside the table to show any borders at all.

4

I assume that you have the class identifier (.) in your real rule?

i.e.

.tableheader1851 {border:1px solid #000}
.tableheader1851 td,th {border:none}

Adding that rule to your live site creates a border around the table as required.

980×443 60.3 KB

However, I see no such rule in your live css file.

5

Thanks.

That’s sorted it

Antony

6

Antony, Just a reminder.

This:

.tableheader1851 td,th {border:none}

targets only the <td> elements within .tableheader1851, and ALL of the <th> elements of the same specificity on ALL pages served by this stylesheet.

 
is not this same as this:

.tableheader1851 td,.tableheader1851 th {border:none}

which targets only the <td> and <th> elements within .tableheader1851.

3 Likes
7

Whoops I should have mentioned that :slight_smile:

3 Likes
8

Thanks both. I have been amalgamating 5 css sheets into one.

I was left with that problem, and two others. If I wanted the table to show the vertical lines but not the hoziontal ones, how do I adjust it.

And the validator says that this is an error viz The “a” property is not a recognized style property. Is it misspelled?
.table {margin:auto;a:link, a:visited color:#000000; font-size: 15px;font-weight:bold;}

I can’t see what is wrong with this.

It is suppose to mean that the table is centred (Margin auto) The links should be black in colour and in bold font 15 px tall

9

Rewrite this in an indented format, each property on a separate line, and see how it reads.

2 Likes
10

I had tried that but couldn’t spot anything

.table {margin:auto;
a:link; a:visited; color:#000000;
font-size: 15px;font-weight:bold;}

11

I’m sorry, but you do not seem to understand the request.

Semicolons separate properties.

Begin:

.table {
    margin:auto;
    and continue listing each property on a separate line
}

additional elements get new curly braces with their relevant properties enclosed.

12

This:

.table {margin:auto;
a:link; a:visited; color:#000000;
font-size: 15px;font-weight:bold;}

has a:link and a:visited as “styles” for .table.

I presume you meant:

.table {margin:auto;}

a:link, a:visited {color:#000000;
font-size: 15px;
font-weight: bold;}
13

I have seen the response from Techno Bear

I thought that it was possible to specify that the links in the teable cell showed this way, as opposed to others on the page

I guess that it must be done differently.

In any event, as it is showing as an error, I guess it won’t be effective anyway at present

14

If you want links which are children of .table to show this styling, you need

.table a:link, .table a:visited {color:#000000;
font-size: 15px;
font-weight: bold;}
15

Can you respond to post #11?

16

Not very specifically

I have merged four CSS Stylesheets which I had for all of the various census transcriptions into one.

I did it via code beautifier and whilst it has worked well overall, I am left with that which gave me an error.

The problem is, I don’t know what it was supposed to do. If anything. Other than it gave me an error so I guess it wasn’t doing anything

17

Thank you for the response. I understand now why it made little sense.

18

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