CODEWITHSUNDEEP
javascriptjqueryhtmlcss
None
None

Reputation: 5670

Hide table header column border

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>

enter image description here

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

Upvotes: 0

Views: 68

Answers (4)

LinJI
LinJI

Reputation: 126

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"~~~

Upvotes: 1

Ashish Kumar
Ashish Kumar

Reputation: 3039

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>

Upvotes: 1

Nicholas Robinson
Nicholas Robinson

Reputation: 1429

try the following:

table {
   border: collapse;
}

th {
  border: none;
}

td {
  border: //What ever you want
}

Upvotes: 1

Matt Parlane
Matt Parlane

Reputation: 473

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

Upvotes: 1

Related Questions