Hide table header column border

Question

My table header HTML looks like this

 .tablebluelight { background: #eef2f7; color: #002d62; font-family: 'Open Sans', sans-serif; font-weight: bold; font-size: 12px; border-color: #eef2f7; } 

 <table class="table table-bordered table-responsive"> <thead> <tr class="tablebluelight"> <th></th> <th>Rod Size</th> <th></th> <th>Rod Angle</th> <th>Rod Size</th> <th></th> <th>Rod Angle</th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> </thead> <tbody> </tbody> </table> 

I want to remove those white border lines between each column. How can I achieve this?

Answer 1

Try adding border-spacing: 0; to the CSS for the table.

Answer 2

try the following:

table {
   border: collapse;
}

th {
  border: none;
}

td {
  border: //What ever you want
}

Answer 3

Add border-spacing: 0px; to Table element. See this.

 .table{ border-spacing: 0px; } .tablebluelight { background: #eef2f7; color: #002d62; font-family: 'Open Sans', sans-serif; font-weight: bold; font-size: 12px; border-color: #eef2f7; } 

 <table class="table table-bordered table-responsive"> <thead> <tr class="tablebluelight"> <th></th> <th>Rod Size</th> <th></th> <th>Rod Angle</th> <th>Rod Size</th> <th></th> <th>Rod Angle</th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> </thead> <tbody> </tbody> </table> 

Answer 4

usually i would use these ways to make that happen~~

1. set "cellspacing" as a attribute of that table.

<table cellspacing="0"></table>

2.set css attribute collapse

.table{border-collapse:collapse;}

---

as a reminder...dont set border to "tr"...it works awfully...coz it would be covered with border of "td"~~~