Welcome to the jungle

Applying Table cell borders

I have an HTML table with the class «productsTable». I want to give each cell in the table a border. Now I have tried the following in my stylesheet but none of the two works. What am I doing wrong? Thank You

td.productsTable < border: 1px dotted #999999; >.productsTable td

 
 
We Offer:
 
e-phone FREE
 
Personal
 
Pro PBX
 
 
Pricing
 
FREE
 
£3 per month
 
From £5 per month
 
 
 

All else being equal, both of those will work… providing the markup you have matches the selectors you are writing. If it doesn’t work then either your markup doesn’t match or you have other styles overriding these. Since we can see neither, we can’t say which.

4 Answers 4

I’ve made a quick fiddle of this, and you can see it working correctly:

 
 
We Offer:
 
e-phone FREE
 
Personal
 
Pro PBX
 
 
Pricing
 
FREE
 
£3 per month
 
From £5 per month
 
 

If this isn’t working for you, its likely that you have either not correctly linked your CSS file, or there is another CSS rule overriding this. Try inspecting element to see.

thanks, it works. Appreciate your help. I think the file just took a long time to reach the server maybe. really wasting my time issues like this.

I want to give each cell in the table a border.

What I’ve understand is you want cell border like this:

Here is the fiddle of what you want.

Use following CSS:

table.productsTable < border-width: 1px; border-spacing: 2px; border-style: outset; border-color: gray; border-collapse: separate; background-color: white; >table.productsTable td

I am agree with you but he didn’t show his HTML structure So, it’s hard to understand how his html structure.

Below code does the following:- 1. gives single border to td’s 2. separate border to the table.

Environment:- Works on FF 34.0.

Untried for html6:- To run it using html6, try it with html:x eg. html:head, html:title, etc.

    .table_main < border-top-style: ridge; border-bottom-style: ridge; border-left-style: ridge; border-right-style: ridge; border-color: red; border-width: 3px; >.table_main td < background: #A38055; border-right: solid 1px white ; border-bottom: 1px solid white; text-align: center; >.table_main th 
Welcome to the jungle
 
 
THead1
 
THead2
 
THead3
 
 
 
A
 
B
 
C
 
 
X
 
Y
 
Z
 
 
Xena
 
Yoda
 
Zohan
 
 
 
   

Источник

HTML Table Borders

HTML tables can have borders of different styles and shapes.

How To Add a Border

To add a border, use the CSS border property on table , th , and td elements:

Example

Collapsed Table Borders

To avoid having double borders like in the example above, set the CSS border-collapse property to collapse .

This will make the borders collapse into a single border:

Example

Style Table Borders

If you set a background color of each cell, and give the border a white color (the same as the document background), you get the impression of an invisible border:

Example

table, th, td <
border: 1px solid white;
border-collapse: collapse;
>
th, td <
background-color: #96D4D4;
>

Round Table Borders

With the border-radius property, the borders get rounded corners:

Example

Skip the border around the table by leaving out table from the css selector:

Example

Dotted Table Borders

With the border-style property, you can set the appearance of the border.

The following values are allowed:

Example

Border Color

With the border-color property, you can set the color of the border.

Example

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

How can I apply a border only inside a table?

The border is around the whole table and also between table cells. What I want to achieve is to have border only inside the table around table cells (without outer border around the table). Here is markup I’m using for tables (even though I think that is not important):

 
 
Heading 1
 
Heading 2
 
 
Cell (1,1)
 
Cell (1,2)
 
 
Cell (2,1)
 
Cell (2,2)
 
 
Cell (3,1)
 
Cell (3,2)
 
 
 

I see only borders only around the cells. Since each of the cells have a border, it appears that the table has a border. Perhaps I don’t get the question?

10 Answers 10

If you are doing what I believe you are trying to do, you’ll need something a little more like this:

table < border-collapse: collapse; >table td, table th < border: 1px solid black; >table tr:first-child th < border-top: 0; >table tr:last-child td < border-bottom: 0; >table tr td:first-child, table tr th:first-child < border-left: 0; >table tr td:last-child, table tr th:last-child

The problem is that you are setting a ‘full border’ around all the cells, which make it appear as if you have a border around the entire table.

EDIT: A little more info on those pseudo-classes can be found on quirksmode, and, as to be expected, you are pretty much S.O.L. in terms of IE support.

With simple tables like this, there’s a much shorter solution which avoid using pseudo-classes by using the next sibling combinator. See my answer.

tested in FF 3.6 and Chromium 5.0, IE lacks support; from W3C:

Borders with the ‘border-style’ of ‘hidden’ take precedence over all other conflicting borders. Any border with this value suppresses all borders at this location.

Example of a very simple way for you to achieve the desired effect:

 
 
1111
 
2222
 
3333
 
 
4444
 
5555
 
6666
 
 
 

«MAGIC» EXPLAINED: frame and rules are OLD (not HTML5) table attributes (you should use CSS instead). frame says which parts of outside table borders should be visible — void means hide all outside borders. rules says which parts of inside table borders should be visible — all means all of them. obviously. Please don’t use this, unless you are HTML3 fanatic . 🙂

Adding something like border: 1px solid black will make sure the outer bound of the table gets a border.

Worked like a charm in 2020 to quickly add some readability to a ridiculously spaced table in a website I was reading. Actually, just this was enough for the internal borders: rules=»all»

I used this for an E-mail body and worked like charm (2023) since CSS rules sometimes can be tricky in an E-mail body.

For ordinary table markup, here’s a short solution that works on all devices/browsers on BrowserStack, except IE 7 and below:

table < border-collapse: collapse; >td + td, th + th < border-left: 1px solid; >tr + tr

For IE 7 support, add this:

Great — as this also allows one to set a different border to the table, rater than just not displaying it.

Due to mantain compatibility with ie7, ie8 I suggest using first-child and not last-child to doing this:

table tr td table tr td:first-child table tr:first-child td

This is a great solution. But be careful, if you have another table in one of your table cells and want to see the inner borders you need another set of CSS lines for your «inner» table

i just tried it, no table border. but if i set a table border it is eliminated by the border-collapse.

   table < border-collapse: collapse; border-spacing: 0; >table < border: 0; >table td, table th  
 
Heading 1
 
Heading 2
 
 
Cell (1,1)
 
Cell (1,2)
 
 
Cell (2,1)
 
Cell (2,2)
 
 
Cell (3,1)
 
Cell (3,2)
 
 
   

that will do it all without css

Works for any combination of tbody/thead/tfoot and td/th

table.inner-border < border-collapse: collapse; border-spacing: 0; >table.inner-border > thead > tr > th, table.inner-border > thead > tr > td, table.inner-border > tbody > tr > th, table.inner-border > tbody > tr > td, table.inner-border > tfoot > tr > th, table.inner-border > tfoot > tr > td < border-bottom: 1px solid black; border-right: 1px solid black; >table.inner-border > thead > tr > :last-child, table.inner-border > tbody > tr > :last-child, table.inner-border > tfoot > tr > :last-child < border-right: 0; >table.inner-border > :last-child > tr:last-child > td, table.inner-border > :last-child > tr:last-child > th

 
 
 
head1,1
 
head1,2
 
head1,3
 
 
head2,1
 
head2,2
 
head2,3
 
 
 
1,1
 
1,2
 
1,3
 
 
2,1
 
2,2
 
2,3
 
 
3,1
 
3,2
 
3,3
 
 
 
foot1,1
 
foot1,2
 
foot1,3
 
 
foot2,1
 
foot2,2
 
foot2,3
 
 
 

Источник

CSS: borders between table columns only

I know this is an old question, but there is a simple, one line solution which works consistently for Chrome, Firefox, etc., as well as IE8 and above (and, for the most part, works on IE7 too — see http://www.quirksmode.org/css/selectors/ for details):

The output is something like this:

What is making this work is that you are defining a border only on table cells which are adjacent to another table cell. In other words, you’re applying the CSS to all cells in a row except the first one.

By applying a left border to the second through the last child, it gives the appearance of the line being «between» the cells.

Erasmus has a better one-liner below

Not without tricky css selectors and extra markup and the like.

Something like this might do (using CSS selectors):

table < border:none; border-collapse: collapse; >table td < border-left: 1px solid #000; border-right: 1px solid #000; >table td:first-child < border-left: none; >table td:last-child

To clarify @jeroen’s comment blow, all you’d really need is:

table < border: none; border-collapse: collapse; >table td < border-left: 1px solid #000; >table td:first-child

Note: IE6-8 does not support :last-child (and spotty on :first-child according to quirksmode.org/css/contents.html

my comment was mainly directed at Scott to counter the problem he brought up; I completely agree with the idea of your answer, you can even get rid of the first line as far as I´m concerned 🙂 +1

Borders on tables are always a bit flaky. One possibility would be to add a border-right declaration to each table cell except for the ones in right-most column. If you’re using any kind of table-spacing this won’t work very well.

Another option would be to use a 1px high background image with the borders inside it, but that’ll only work if you can guarantee the width of each cell at all times.

Another possibility is to experiment with colgroup / col. This had fairly horrible support cross-browser the last time i looked at it but could have improved since then: http://www.webmasterworld.com/forum83/6826.htm

This is rather terrible advice — CSS offers an easy way for relatively recent (IE8+) to accomplish this elegantly.

Bear in mind this answer (and the question) are both from 2010, half a decade ago, back when IE6 was still under active support for many developers. Additionally the CSS methods for achieving table borders at the time were impossible for pretty much every HTML email renderer available. Thanks for the necromancy, though!

Источник

html/css: Draw borders through a table cell

What I want to achieve is to draw a border around the first column, that means around col1 and the left part of Mybigcell. The border thus has to run through the middle of Mybigcell. Is it possible?

There is no «left part» of the cell which has colspan=»2″ (notice to add the hyphens). So no element available to draw the border you want on that row. You will have to restructure your markup.

Ideally, everything is dynamic. If it’s not possible for a dynamic layout I can settle for static widths, though.

1 Answer 1

You can use absolute positioned pseudo-elements to achieve this.

Just use the CSS below and add class=»border» to some cell. Its column will obtain a border.

Basically, it works like this:

• We will insert some absolute positioned pseudo-elements with top: 0 and bottom: 0 . Their containing block will be the table rectangle ( position: relative ), so the pseudo-elements will grow to cover all the column.
• These pseudo-elements will be inserted at the beginning of the cells ( ::before ). Assuming left aligning inside the cells, they will be aligned at the desired position.
• Note they can’t be aligned using left: 0 (and we can’t use ::after with right: 0 neither) because the containing block is the table, not the cell. If the containing block was the cell this would be more reliable, but the borders wouldn’t fill all the column.
• Therefore, if a cell has a border class, a pseudo-element will be inserted in that cell (the left border), and in the following one (the right border).
• But if the cell with the border class was the last one in the row, it would have no right border, because there is no following cell.
• To fix that, I use the :last-child pseudo-class to detect this case, and then I insert an ::after pseudo-element with left: 100% . As mentioned above, it will be aligned relatively to the table instead of the cell. But assuming there is no missing cell in the row, that won’t matter because the right edge of the cell and the right edge of the table will coincide.
• Finally, I do some small adjustments using negative margins, to make it pixel perfect.

table < position: relative; /* Containing block for the borders */ border-collapse: collapse; >td < padding: 1px; padding-left: 2px; /* Increase by borderWidth */ >.border:before, .border + :before, .border:last-child:after < content: ''; /* Enable the pseudo-element */ position: absolute; /* Take it out of flow */ top: 0; /* From the top of the table. */ bottom: 0; /* . to the bottom of the table */ border-left: 1px solid;/* This produces the border */ margin-left: -2px; /* Same as td's paddingLeft, in negative */ >.border:last-child:after < left: 100%; /* Place it at the right */ margin-left: 0; /* Remove the margin set previously */ >

 
 
col1
 
col2
 
col3
 
 
Mybigbigcell
 
 
 
 
 
col1
 
col2
 
col3
 
 
Mybigbigcell
 
 
 
 
 
col1
 
col2
 
col3
 
 
Mybigbigcell
 
 
 
 
 
col1
 
col2
 
col3
 
col4
 
 
Mybigbigbigcell
 
 

If you want to customize the width of the borders or the paddings, see the SCSS:

/* Parameters */ $borderWidth: 1px; $padding: 1px; /* Code */ $sum: $borderWidth + $padding; table < position: relative; border-collapse: collapse; >td < padding: $padding; padding-left: $sum; >.border:before, .border + :before, .border:last-child:after < content: ''; position: absolute; top: 0; bottom: 0; border-left: $borderWidth solid; margin-left: - $sum; >.border:last-child:after

Источник