无法为部分添加边框 CSS

Question

我想为表中的每个部分添加边框（这意味着将两个部分分开的两个边框。假设该表已经有标题）：

<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>

我正在尝试使用以下 CSS 代码，但底部边框没有出现

section[class="physicists"] {

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

}

谁能告诉我问题出在哪里？

Answer 1

第一个错误：起初， <section>元素不能那样使用。 table可以嵌入到section中，但反之则不行。

将其拆分为两个表，如下所示：

<!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 class="physicists my-frame">
    <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>
  </table>
  <table class="martial-artists my-frame">
    <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>
  </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>

第二个信息：这不是编写选择器的最佳方式：

section[class="physicists"]{ /* ... */ }

更好的是：

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

Answer 2

使用`<tbody>`而不是`<section>`

正如其他人在评论中指出的那样， <table>不能包含<section>作为其有效的子元素。 相反， <tbody>元素就是为了这个目的。

1. 以`<th>`为节标题的示例

 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. 没有节标题的例子

 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>

应用`border-collapse: collapse;` 到父表

当单元格分开时，单元格之间的距离由border-spacing属性定义。

border-collapse决定表格单元格如何处理它们的边框。 如果不设置，默认情况下是separate的。 有关详细信息，请参阅此 MDN 页面。

无法为部分添加边框 CSS

问题描述

2 个解决方案

解决方案1
0 2023-01-12 22:39:29

解决方案2
0 2023-01-13 03:55:16

使用`<tbody>`而不是`<section>`

1. 以`<th>`为节标题的示例

2. 没有节标题的例子

应用`border-collapse: collapse;` 到父表

无法为部分添加边框 CSS

问题描述

2 个解决方案

解决方案1 0 2023-01-12 22:39:29

解决方案2 0 2023-01-13 03:55:16

使用<tbody>而不是<section>

1. 以<th>为节标题的示例

2. 没有节标题的例子

应用border-collapse: collapse; 到父表

解决方案1
0 2023-01-12 22:39:29

解决方案2
0 2023-01-13 03:55:16

使用`<tbody>`而不是`<section>`

1. 以`<th>`为节标题的示例

应用`border-collapse: collapse;` 到父表