Cannot add borders to the sections CSS-CodePudding

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 >

        <tr >
            <td>Richard Feynman</td>
            <td>Image1</td>
            <td>Descrption1</td>            
        </tr>

        <tr >
            <td>Albert Einstein</td>
            <td>Image2</td>
            <td>Descrption2</td>            
        </tr>

    </section>

    <section >

        <tr >
            <td>Bruce Lee</td>
            <td>Image3</td>
            <td>Descrption3</td>            
        </tr>

        <tr >
            <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[] {

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

}

Can anyone tell me what the issue is?

CodePudding user response：

First bug: At first, <section> element can't be used that way. The table can be embedded in the section but not the other way around.

Split it to two tables like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <title>Eckert Művek Galéria</title>    
</head>
<body>
  <table >
    <tr >
      <td>Richard Feynman</td>
      <td>Image1</td>
      <td>Descrption1</td>            
    </tr>
    <tr >
      <td>Albert Einstein</td>
      <td>Image2</td>
      <td>Descrption2</td>            
    </tr>
  </table>
  <table >
    <tr >
      <td>Bruce Lee</td>
      <td>Image3</td>
      <td>Descrption3</td>            
    </tr>
    <tr >
      <td>Chunk Norris</td>
      <td>Image4</td>
      <td>Descrption4</td>            
    </tr>
  </table>

  <style>
    .my-frame {
      border-top: solid 3px;
      border-bottom: solid 3px;
      border-color: red;
      width:100%;
      margin-top:5px;
    }
        
    .my-frame td{
      width:33%;
    }
  </style>
</body>
</html>

Second info: This is not the best way to write selectors:

section[]{ /* ... */ }

Better is:

section.physicists{ /* ... */ }

CodePudding user response：

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 >
    <tr>
      <th colspan="3">Physicists</th>
    </tr>
    <tr >
      <td>Richard Feynman</td>
      <td>Image1</td>
      <td>Descrption1</td>
    </tr>
    <tr >
      <td>Albert Einstein</td>
      <td>Image2</td>
      <td>Descrption2</td>
    </tr>
  </tbody>
  <tbody >
    <tr>
      <th colspan="3">Martial Artists</th>
    </tr>
    <tr >
      <td>Bruce Lee</td>
      <td>Image3</td>
      <td>Descrption3</td>
    </tr>
    <tr >
      <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 >
    <tr >
      <td>Richard Feynman</td>
      <td>Image1</td>
      <td>Descrption1</td>
    </tr>
    <tr >
      <td>Albert Einstein</td>
      <td>Image2</td>
      <td>Descrption2</td>
    </tr>
  </tbody>
  <tbody >
    <tr >
      <td>Bruce Lee</td>
      <td>Image3</td>
      <td>Descrption3</td>
    </tr>
    <tr >
      <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.

Use <tbody> instead of <section>

1. An example with <th> as section heading

2. An example without section heading

Apply border-collapse: collapse; to the parent table

Use `<tbody>` instead of `<section>`

1. An example with `<th>` as section heading

Apply `border-collapse: collapse;` to the parent table