Css table with cell borders

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
 
 
 

Источник

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

Источник

Styling borders for table cell

If we want to achieve the following, i.e. style the border in such a way that the border will have the thick right bottom corner and upon hover show a plus sign. What I have done: I have done selection of cells in tables. Normal borders. Even tried border styling, but most of which is rounded or cut-off borders, which is not of use here. What I am trying to do: I am trying to mimic series fill functionality of excel in html table. Functionality is not a problem. I am just trying to get the styling of these borders right so that it is easier to comprehend. So, How can we customize the border to get the desired effect only using css and html? select.js

It would be useful to see what you have to far, to see how you are defining the selection itself. I would imagine you’d have to absolutely position psuedo elements, but it’s hard to say at this stage.

What’s the point of border-radius and what exactly isn’t working? Also, you can show your little icon by either manipulating the cursor, or just insert the graphic into the DOM as needed and then set the position absolutely to the bottom right corner of your active cell.

I added the point of border radius just to emphasize that I am not looking at that part (rounded edges or cut off edges) for which i got most of the search results for.

1 Answer 1

I went back and added a different behavior to each cell after looking at ther image I believe I understand now See updated Snippet. It has been brought to my attention that you probably don’t want every cell that way (I tend to go into automatic coding, like a robot 🤖.) I modified it so that the last cell will have the div.pad . Did you mean a square on every cell or just the table? If the latter, let me know, it’s an easy adjustment. I used

• position: relative and absolute
• z-index
• border-collapse: separate
• border-spacing , border , and outline
• Pseudo-elements ::before and ::after
• 2 unicode entities \1f4c4 📄 and \2795 ➕
• and the pseudo-class :hover of course.
• Added tr:last-of-type td:last-of-type to single out the last cell.

Special note on the div.pad ‘s styling.

• position:absolute allowed us to easily pick the bottom right corner. If bottom:0 and right:0 puts .pad snugly into the corner, then we can continue going forward with negative length values in order for .pad to sit halfway in and halfway out of cell/table borders.
• Added outline:2px solid white instead of border because unlike border, outline width doesn’t displace other elements in the layout. The white color is to blend into the background giving the appearance of .pad being more of a separate yet related component of the table.
• z-index:1 was also given to .pad so that the white outline is clearly defined from the table borders.

The other main points are:

• The borders were made so that they were defined as separate properties but appeared as one border (like border-collapse: collapse; ) To avoid that disconnected look the border-collapse:separate gives, we use outline to fill in that border-spacing of 1px; if we were to use only borders, the table as a whole would increase noticeably in size. The border and outline styles are inset and the last cell has an over sized outline style outset designating it as highlighted.

table < border-collapse: separate; border-spacing: 1px; border: 1px inset black; outline: 1px inset black; table-layout: fixed; width: 80vw; min-height: 150px; >td < border:1px solid black; outline: 1px inset black; >td:hover < border: -3px inset black; outline: 6px outset black; position: relative; z-index:1; padding:1px; >.pad < background: black; cursor: pointer; position: absolute; height: 1px; width: 1px; z-index: 1; bottom: -1px; right: -1px; >td:hover .pad, .pad:hover < border: 4px solid black; bottom: -9px; right: -9px; outline: 2px solid white; z-index:2; padding:2px; >.pad:hover::before < content: '\1f4c4'; position: relative; top: 20px; left: 10px; font-size: 1.2rem; z-index:2; >.pad:hover::after

Источник