Question 180405 in Html Question posted in
Some basic documentation can be found here.

Can HTML tables have different styles?

I have two HTML tables on my page with two totally different styles. I don’t want the style of first HTML table affecting the style of second HTML table, but somehow as soon as I define the style of second HTML table, the first HTML table gets affected too. below are the tables:

<table class="table table-bordered table-responsive table-hover">
    <tr>
        <th>Month</th>
        <th>Savings</th>
    </tr>
    <tr>
        <td>January</td>
        <td>$100</td>
    </tr>
    <tr>
        <td>February</td>
        <td>$80</td>
    </tr>
</table>




  <table class="aTable">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

stylesheet:

.table tr:nth-child(even) {
    background: #FFF;
 
}

.table tr:nth-child(odd) {
    background: #D8EBFB;
}

.table tr:first-child {
    background: #add8e6;
    
}

.aTable{
    width:85%;
    
}
    .aTable  th, td {
        border: 1px solid black;
        background-color: #DDD;
    }

below is how the table look like with above style sheet:

enter image description here

The bottom table is fine, but top table start showing the vertical lines once I added the aTable stylesheet. Also, the bottom disappears too. If I remove the aTable stylesheet, the top table looks like this with no vertical lines.

enter image description here

How can I keep the top table as it is and bottom table with .atable stylesheet without affecting the tables with each other styles. I want the bottom table to look like this:

enter image description here

any help is appreciated.

Tags:

2

Answers


  1. 0

    Here is your mistake .aTable th, td this line in the style will set to all tds.

    Should be:

    .aTable  th, .aTable td {
        border: 1px solid black;
        background-color: #DDD;
    }
    Login or Signup to reply.
  2. 0

    you just need to specify which table td you want to apply styling for.

    Use
    .aTable td instead of just using td as it will be applied for all td tags within your HTML

    .table tr:nth-child(even) {
  background: #FFF;
}

.table tr:nth-child(odd) {
  background: #D8EBFB;
}

.table tr:first-child {
  background: #add8e6;
}

.aTable {
  width: 85%;
}

.aTable th,
.aTable td {
  border: 1px solid black;
  background-color: #DDD;
}
    <table class="table table-bordered table-responsive table-hover">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>




<table class="aTable">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search