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;
}
         


        

Answer 1

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 {
    border-bottom: 0;
}

    

    

        
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