CODEWITHSUNDEEP
htmltwitter-bootstrap
dirghayu
dirghayu

Reputation: 53

how to add two bootstrap class properties in html table tag?

Here is my Html code. I want to add two class properties of bootstrap in tag <table>, eg(table-bordered & table-striped).

I want to use this both class properties in table tag.

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Address</th>
    </tr>
  </thead>
  <tbody>
      <tr>
        <td>anmol</td>
        <td>america</td>
      </tr>
  </tbody>
</table>

Upvotes: 1

Views: 7986

Answers (4)

user254153
user254153

Reputation: 1883

 <table class="table table-bordered table-striped table-hover">

Bootstrap has many class for table. You can add more than one class to the element.

Upvotes: 0

Wasim Ahmad
Wasim Ahmad

Reputation: 409

It can be easily done just use it like <table class='table table-bordered table-striped'>. You can also use CSS if you want to use some different color. 

tr:nth-child(odd) {
  background: #ff0000;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<table class="table table-bordered table-striped">
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Wasim</td>
      <td>Doe</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>Mary</td>
      <td>Moe</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>July</td>
      <td>Dooley</td>
      <td>[email protected]</td>
    </tr>
  </tbody>
</table>

Upvotes: 0

Bartoaster
Bartoaster

Reputation: 66

<table class="table table-bordered table-striped">

You can add as many classes as you want. Don't forget to add the base class .table

Upvotes: 5

dirghayu
dirghayu

Reputation: 53

After  doing some research in google i am able to use those both 
class properties by doing this..

<table class="table-bordered table-striped">
  <thead>
    <tr>
      <th>Name</th>
      <th>Address</th>
    </tr>
  </thead>
  <tbody>
      <tr>
        <td>anmol</td>
        <td>america</td>
      </tr>
  </tbody>
</table>

Upvotes: 0

Related Questions