nth-child () only one attribute is working - why?

Question

Does anyone know why only the background-color: #f2eaea; inside the .responstable tr:nth-child(4n+2) is working?

The border: 19px solid #e6d9d9; isn't and I can't understand why.

I took some of this code from the internet. I tried to use it in other classes and it is working.

.responstable {
    margin: 1em 0;
    width: 100%;
    overflow: hidden;
    background: #FFF;
    color: #570101;
    border-radius: 10px;
    border: 1px solid #911515;

    }
.responstable tr {
  border: 1px solid #e6d9d9;

}
.responstable tr:nth-child(4n+2) {
  background-color: #f2eaea;
  border: 19px solid #e6d9d9;

}
.responstable th {
  display: none;
  border: 1px solid #FFF;
  background-color: #911515;
  color: #FFF;
  padding: 1em;
}
.responstable th:first-child {
  display: table-cell;
  text-align: center;
}
.responstable th:nth-child(2) {
  display: table-cell;
}
.responstable th:nth-child(2) span {
  display: none;
}
.responstable th:nth-child(2):after {
  content: attr(data-th);
}
@media (min-width: 480px) {
  .responstable th:nth-child(2) span {
    display: block;
  }
  .responstable th:nth-child(2):after {
    display: none;
  }
}
.responstable td {
  display: block;
  word-wrap: break-word;
  max-width: 7em;
}
.responstable td:first-child {
  display: table-cell;
  text-align: center;
  border-right: 1px solid #e6d9d9;
}

@media (min-width: 480px) {
  .responstable td {
    border: 1px solid #e6d9d9;
  }
}
.responstable th, .responstable td {
  text-align: left;
  margin: .5em 1em;
}
@media (min-width: 480px) {
  .responstable th, .responstable td {
    display: table-cell;
    padding: 1em;
  }
}

<table class="responstable">

    </br>
    </br>

  <tr>
    <th data-th="Driver details"><span>First name</span></th>
    <th>Surname</th>
    <th>Date of birth</th>
    <!-- <th>Relationship</th> -->
  </tr>

  <tr>
    <td>Steve</td>
    <td>Foo</td>
    <td>01/01/1978</td>
    <!-- <td>Policyholder</td> -->
  </tr>

   <tr>
    <td>Steve</td>
    <td>Foo</td>
    <td>01/01/1978</td>
    <!-- <td>Policyholder</td> -->
  </tr>

   <tr>
    <td>Steve</td>
    <td>Foo</td>
    <td>01/01/1978</td>
    <!-- <td>Policyholder</td> -->
  </tr>

</table>

You have some invalid code here. Please run your code through an HTML validator and fix your issues. — TylerH, Jan 09 '18 at 15:44
Might need to use `border-collase: collapse` on the table, although that'll remove the spacing you have between the TDs — abney317, Jan 09 '18 at 15:47
Possible duplicate of [Add border-bottom to table row ](https://stackoverflow.com/questions/10040842/add-border-bottom-to-table-row-tr) — TylerH, Jan 09 '18 at 15:48
I'm just testing. I want to also change to a thicker border the first in each four lines. — Rui Andrade, Jan 09 '18 at 16:01
Thanks miguel-svq but i want to have a diferent border in the first row of every four lines. Not by column. I want to change the exact rows that are being changed in the background-color: #f2eaea; inside the .responstable tr:nth-child(4n+2) — Rui Andrade, Jan 09 '18 at 18:26

score 1 · Answer 1 · answered Jan 10 '18 at 06:16

try this

.responstable {
    margin: 1em 0;
    width: 100%;
    overflow: hidden;
    background: #FFF;
    color: #570101;
    border-radius: 10px;
    border: 1px solid #911515;
    border-collapse: collapse;
    }
.responstable tr {
  border: 1px solid #e6d9d9;

}
.responstable tr:nth-child(4n+2) {
  background-color: #f2eaea;
  border: 19px solid #e6d9d9;

}
.responstable th {
  display: none;
  border: 1px solid #FFF;
  background-color: #911515;
  color: #FFF;
  padding: 1em;
}
.responstable th:first-child {
  display: table-cell;
  text-align: center;
}
.responstable th:nth-child(2) {
  display: table-cell;
}
.responstable th:nth-child(2) span {
  display: none;
}
.responstable th:nth-child(2):after {
  content: attr(data-th);
}
@media (min-width: 480px) {
  .responstable th:nth-child(2) span {
    display: block;
  }
  .responstable th:nth-child(2):after {
    display: none;
  }
}
.responstable td {
  display: block;
  word-wrap: break-word;
  max-width: 7em;
}
.responstable td:first-child {
  display: table-cell;
  text-align: center;
  border-right: 1px solid #e6d9d9;
}

@media (min-width: 480px) {
  .responstable td {
    border: 1px solid #e6d9d9;
  }
}
.responstable th, .responstable td {
  text-align: left;
  margin: .5em 1em;
}
@media (min-width: 480px) {
  .responstable th, .responstable td {
    display: table-cell;
    padding: 1em;
  }
}

<table class="responstable">

    </br>
    </br>

  <tr>
    <th data-th="Driver details"><span>First name</span></th>
    <th>Surname</th>
    <th>Date of birth</th>
    <!-- <th>Relationship</th> -->
  </tr>

  <tr>
    <td>Steve</td>
    <td>Foo</td>
    <td>01/01/1978</td>
    <!-- <td>Policyholder</td> -->
  </tr>

   <tr>
    <td>Steve</td>
    <td>Foo</td>
    <td>01/01/1978</td>
    <!-- <td>Policyholder</td> -->
  </tr>

   <tr>
    <td>Steve</td>
    <td>Foo</td>
    <td>01/01/1978</td>
    <!-- <td>Policyholder</td> -->
  </tr>

</table>

nth-child () only one attribute is working - why?

1 Answers1