How can I apply a border only inside a table

Question

I am trying to figure out how to add border only inside the table  When I do   table       border  0    table td  table th       border  1px solid black      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     lt table gt       lt tr gt           lt th gt Heading 1 lt  th gt           lt th gt Heading 2 lt  th gt       lt  tr gt       lt tr gt           lt td gt Cell  1 1  lt  td gt           lt td gt Cell  1 2  lt  td gt       lt  tr gt       lt tr gt           lt td gt Cell  2 1  lt  td gt           lt td gt Cell  2 2  lt  td gt       lt  tr gt       lt tr gt           lt td gt Cell  3 1  lt  td gt           lt td gt Cell  3 2  lt  td gt       lt  tr gt   lt  table gt    And here are some basic styles I apply to most of my tables   table       border-collapse  collapse      border-spacing  0

User · Answer

this should work   table    border 0     table td  table th       border  1px solid black      border-collapse  collapse        edit   i just tried it  no table border  but if i set a table border it is eliminated by the border-collapse   this is the testfile    lt html gt   lt head gt   lt style type  text css  gt  table       border-collapse  collapse      border-spacing  0      table       border  0    table td  table th       border  1px solid black       lt  style gt   lt  head gt   lt body gt   lt table gt       lt tr gt           lt th gt Heading 1 lt  th gt           lt th gt Heading 2 lt  th gt       lt  tr gt       lt tr gt           lt td gt Cell  1 1  lt  td gt           lt td gt Cell  1 2  lt  td gt       lt  tr gt       lt tr gt           lt td gt Cell  2 1  lt  td gt           lt td gt Cell  2 2  lt  td gt       lt  tr gt       lt tr gt           lt td gt Cell  3 1  lt  td gt           lt td gt Cell  3 2  lt  td gt       lt  tr gt   lt  table gt    lt  body gt   lt  html gt

User · Answer

Add the border to each cell with this   table  gt  tbody  gt  tr  gt  td   border  1px solid rgba 255  255  255  0 1       Remove the top border from all the cells in the first row   table  gt  tbody  gt  tr first-child  gt  td   border-top  0      Remove the left border from the cells in the first column   table  gt  tbody  gt  tr  gt  td first-child   border-left  0      Remove the right border from the cells in the last column   table  gt  tbody  gt  tr  gt  td last-child   border-right  0      Remove the bottom border from the cells in the last row   table  gt  tbody  gt  tr last-child  gt  td   border-bottom  0      http   jsfiddle net hzru0ytx

User · Answer

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     border-right  0      jsFiddle Demo  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   Cheers   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

User · Answer

Works for any combination of tbody thead tfoot and td th   x000D   x000D  table inner-border   x000D      border-collapse  collapse  x000D      border-spacing  0  x000D    x000D   x000D  table inner-border  gt  thead  gt  tr  gt  th  x000D  table inner-border  gt  thead  gt  tr  gt  td  x000D  table inner-border  gt  tbody  gt  tr  gt  th  x000D  table inner-border  gt  tbody  gt  tr  gt  td  x000D  table inner-border  gt  tfoot  gt  tr  gt  th  x000D  table inner-border  gt  tfoot  gt  tr  gt  td   x000D      border-bottom  1px solid black  x000D      border-right  1px solid black  x000D    x000D   x000D  table inner-border  gt  thead  gt  tr  gt   last-child  x000D  table inner-border  gt  tbody  gt  tr  gt   last-child  x000D  table inner-border  gt  tfoot  gt  tr  gt   last-child   x000D      border-right  0  x000D    x000D   x000D  table inner-border  gt   last-child  gt  tr last-child  gt  td  x000D  table inner-border  gt   last-child  gt  tr last-child  gt  th   x000D      border-bottom  0  x000D    x000D   lt table class  inner-border  gt  x000D       lt thead gt  x000D       lt tr gt  x000D           lt th gt head1 1 lt  th gt  x000D           lt td gt head1 2 lt  td gt  x000D           lt td gt head1 3 lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D           lt td gt head2 1 lt  td gt  x000D           lt td gt head2 2 lt  td gt  x000D           lt th gt head2 3 lt  th gt  x000D       lt  tr gt  x000D       lt  thead gt  x000D       lt tr gt  x000D           lt td gt 1 1 lt  td gt  x000D           lt th gt 1 2 lt  th gt  x000D           lt td gt 1 3 lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D           lt td gt 2 1 lt  td gt  x000D           lt td gt 2 2 lt  td gt  x000D           lt td gt 2 3 lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D           lt td gt 3 1 lt  td gt  x000D           lt td gt 3 2 lt  td gt  x000D           lt td gt 3 3 lt  td gt  x000D       lt  tr gt  x000D       lt thead gt  x000D       lt tr gt  x000D           lt th gt foot1 1 lt  th gt  x000D           lt td gt foot1 2 lt  td gt  x000D           lt td gt foot1 3 lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D           lt td gt foot2 1 lt  td gt  x000D           lt th gt foot2 2 lt  th gt  x000D           lt th gt foot2 3 lt  th gt  x000D       lt  tr gt  x000D       lt  thead gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

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   border-top  1px solid      For IE 7 support  add this   tr   tr  gt  td  tr   tr  gt  th   border-top  1px solid      A test case can be seen here  http   codepen io dalgard pen wmcdE

User · Answer

Example of a very simple way for you to achieve the desired effect    lt table border  1  frame  void  rules  all  gt       lt tr gt           lt td gt 1111 lt  td gt           lt td gt 2222 lt  td gt           lt td gt 3333 lt  td gt       lt  tr gt       lt tr gt           lt td gt 4444 lt  td gt           lt td gt 5555 lt  td gt           lt td gt 6666 lt  td gt       lt  tr gt   lt  table gt

User · Answer

Due to mantain compatibility with ie7  ie8 I suggest using first-child and not last-child to doing this   table tr td border-top 1px solid  ffffff border-left 1px solid  ffffff    table tr td first-child border-left 0    table tr first-child td border-top 0     You can learn about CSS 2 1 Pseudo-classes at  http   msdn microsoft com en-us library cc351024 VS 85  aspx

User · Answer

this works for me   table       border-collapse  collapse      border-style  hidden     table td  table th       border  1px solid black      view example      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

User · Answer

that will do it all without css  lt TABLE BORDER 1 RULES ALL FRAME VOID gt   code from  HTML CODE TUTORIAL

[html] How can I apply a border only inside a table?

Examples related to html

Examples related to css

Examples related to html-table

Examples related to border