Single td with border CSS
I’m trying to understand how CSS passes values across a table hierarchy. I’ve purposely classed a td as «border_single» in order to specifically reference it and apply a basic border. I cant get the border to show, I’m assuming its inheriting the styles from high levels which is why the border for the specific td isnt showing?
2 Answers 2
Your work is correct, you just need to add td in your class
Even if you have td.no_borders , td.with_background and more, the td.border_single will still work as specified, you can also use id #border_single or td#border_single to be more specific.
You can also use td:nth-child(n), td:first-child, td:last-child and have the same output, without using id or class
table < border-collapse: collapse; margin:100px auto; >td < margin: 0px; padding: 5px; text-align: left; border:1px solid #080808; >.border < border: 1px solid #080808; >.noborders td < border:0; >td.border_single < border: 1px solid #080808; >tr:nth-child(5) > td:nth-child(2) < border: 1px solid #080808; >tr:last-child > td:nth-child(2)
Table Cell with borders Table Cell with borders Table Cell with borders Table Cell without borders Table Cell without borders Table Cell without borders Table Cell without borders Table WITH border Table Cell without borders Table Cell without borders Table Cell without borders Table Cell without borders Table Cell without borders With border using tr:nth-child(n) > td:nth-child(n) Table Cell without borders Table Cell without borders Table Cell without borders Table Cell without borders Table Cell without borders With border using tr:last-child > td:nth-child(n) Table Cell without borders
Black border on single table cell css
Just cannot imagine how to do a single table cell border black. Just like it is in excel — whole table TD borders are, for example, white, and selected cell has black border. The obvious solution is to change borders of the nearest cells as well, but the table is dynamically generated ant it takes too much effort to calculate current cell’s neighbours. Although, the current cell is known from the «click» event, so it would be great to achieve that styling it. Tried to put the div inside but cannot align it without specifying cell and div sizes exactly in pixels, that is not portable. Please help! Sorry, thought it’s obvious without code. Actually, I don’t have a code that’s working, but currently I’m trying that (wrote just a quick sample, sorry): https://jsfiddle.net/a549b6t1/10/
table < border-collapse: separate; border-spacing: 0; padding: 0; border: 0px solid #ffffff; margin: 1em; >td < font-size: 1rem; empty-cells: show; border: 1px solid rgba(230,222,255,1); padding: 0; >td#selected < font-size: 1rem; empty-cells: show; border: 1px solid rgba(0,0,0,1); padding: 0; >tr:nth-child(odd) < padding: 0px; margin: 0; background: #efedee; border: 0px solid transparent; overflow: visible; >tr:nth-child(even) < padding: 0px; margin: 0; background: #f6f4f5; border: 0px solid transparent; overflow: visible; >input[type=text]
Hope it will help to understand the problem This is how I want it to llok like 
This is how it really looks like now 
Solution provided by Shaggy : https://jsfiddle.net/a549b6t1/14/ Thank you!
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
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