htmlcssbordersections

Cannot add borders to the sections CSS

I want to add borders to each of the sections in the table (Which means two borders separating the two sections. Assuming this table has headers already):

<table>
    <section class="physicists">

        <tr class="Richard-Feynman">
            <td>Richard Feynman</td>
            <td>Image1</td>
            <td>Descrption1</td>            
        </tr>

        <tr class="Albert-Einstein">
            <td>Albert Einstein</td>
            <td>Image2</td>
            <td>Descrption2</td>            
        </tr>

    </section>

    <section class="martial-artists">

        <tr class="Bruce-Lee">
            <td>Bruce Lee</td>
            <td>Image3</td>
            <td>Descrption3</td>            
        </tr>

        <tr class="Chunk-Norris">
            <td>Chunk Norris</td>
            <td>Image4</td>
            <td>Descrption4</td>            
        </tr>

    </section>
</table>

I was attempting with the following CSS code, but the border-bottom does not appear

section[class="physicists"] {

    border-top: solid 3px;
    border-bottom: solid 3px;
    border-color: red;

}

Can anyone tell me what the issue is?

Solution

  • Use <tbody> instead of <section>

    As others noted in the comments, <table> cannot contain <section> as its valid child element. Instead, <tbody> element is meant for this exact purpose.

    1. An example with <th> as section heading

    table {
  border-collapse: collapse;
}
td, th {
  padding: 5px;
  background-color: #f0f0f0;
}
tbody > tr > th {
  background: #c6c8d2;
}

tbody {
  border-top: 3px solid red;
  border-bottom: 3px solid red;
}
    <table>
  <tbody class="physicists">
    <tr>
      <th colspan="3">Physicists</th>
    </tr>
    <tr class="Richard-Feynman">
      <td>Richard Feynman</td>
      <td>Image1</td>
      <td>Descrption1</td>
    </tr>
    <tr class="Albert-Einstein">
      <td>Albert Einstein</td>
      <td>Image2</td>
      <td>Descrption2</td>
    </tr>
  </tbody>
  <tbody class="martial-artists">
    <tr>
      <th colspan="3">Martial Artists</th>
    </tr>
    <tr class="Bruce-Lee">
      <td>Bruce Lee</td>
      <td>Image3</td>
      <td>Descrption3</td>
    </tr>
    <tr class="Chunk-Norris">
      <td>Chunk Norris</td>
      <td>Image4</td>
      <td>Descrption4</td>
    </tr>
  </tbody>
</table>

    2. An example without section heading

    table {
  border-collapse: collapse;
}
td {
  padding: 5px;
  background-color: #f0f0f0;
}

tbody {
  border-top: 3px solid red;
  border-bottom: 3px solid red;
}
    <table>
  <tbody class="physicists">
    <tr class="Richard-Feynman">
      <td>Richard Feynman</td>
      <td>Image1</td>
      <td>Descrption1</td>
    </tr>
    <tr class="Albert-Einstein">
      <td>Albert Einstein</td>
      <td>Image2</td>
      <td>Descrption2</td>
    </tr>
  </tbody>
  <tbody class="martial-artists">
    <tr class="Bruce-Lee">
      <td>Bruce Lee</td>
      <td>Image3</td>
      <td>Descrption3</td>
    </tr>
    <tr class="Chunk-Norris">
      <td>Chunk Norris</td>
      <td>Image4</td>
      <td>Descrption4</td>
    </tr>
  </tbody>
</table>

    Apply border-collapse: collapse; to the parent table

    When cells are separated, the distance between cells is defined by the border-spacing property.

    border-collapse determines how the table cells would handle their borders. If not set, it's separate by default. For details, see this MDN page.