CODEWITHSUNDEEP
htmltwitter-bootstrapcsshtml-table
Junior
Junior

Reputation: 11988

How to add a right border to only one colum when using css bootstrap?

I am trying to use css bootstrap framework in my project

I am using table with the following classes table table-bordered table-striped

I want to remove the borders from all the column except the first column.

Here is my table in a fiddler https://jsfiddle.net/8yf0v3xt/16/

Basically in this screenshot, I only want to remove the vertical borders in the red rectangle border.

enter image description here

<table class="table table-bordered table-striped">
<thead>
  <tr><th></th><th></th>...</tr>
</thead>
<tbody>
<tr><th score="row"><th></td><td></td>...</tr>
...
</tbody>
</table>

EDITED

Or, if I remove the table-bordered class, how can I only add a column on the very first column? something like this screenshot enter image description here

How can I do that?

Upvotes: 3

Views: 3290

Answers (1)

Jay
Jay

Reputation: 1678

You need to look into the :first-child pseudo selector. Link here

The :first-child selector is used to select the specified selector, only if it is the first child of its parent.

You can select all of the td elements and remove the border from them all with:

table tr td { border: none; }

And then to add unique styling to just the first element:

table tr td:first-child { border: default; } /* Or whatever styling you may wish..

The same can be done with :last-child which will of course select the last element in oppose to the first.

And if you need to be even more specific again.. You can use :nth-child(x) where x is the number of the element that you wanted.

Fiddle: https://jsfiddle.net/8yf0v3xt/18/

UPDATE

Fiddle: https://jsfiddle.net/8yf0v3xt/22/

I've removed the .table-bordered class and added the following CSS:

table { border: 1px solid #ddd; }
table.table tr, table.table tr th, table.table tr td { border: none; }
table.table tr th:first-child, table.table tr td:first-child { border: 1px solid #ddd; }

I have used the pseudo selectors like explained above to add styling to just the first column.

Upvotes: 3

Related Questions