如何在反应的表格标题行之后和之前添加一条水平线？

Posted 2023-03-06

【中文标题】如何在反应的表格标题行之后和之前添加一条水平线？

【英文标题】：How to add a horizontal line after and before table headers row in react?

【发布时间】：2021-08-28 00:27:58

【问题描述】：

我正在制作一个反应应用程序，我必须在表格标题行之前和之前添加一条全宽水平线，如何在此处添加它？

 return (
    <div>
      <table >
       <tr>
          <th>Name</th>
          <th>Id</th>
          <th>Age</th>
          <th>Status</th>
          <th>Sem</th>
          <th>Time</th>
          <th></th>
          <th></th>
        </tr>
        tasks.map((task, index) => (
          <Task key=index task=task onDelete=onDelete />
        ))
        
      </table>
    </div>
  );
;

这里所有<th>字段都是标题，我必须在标题行之前添加一条水平线，在标题行之后添加一条。

有人可以帮忙吗？ 谢谢

【问题讨论】：

嗨，在 tr 标签上使用border-top和border-bottom。

不工作，没有边界

【参考方案1】：

在th上添加border-top和bottom

tr th  
  border-top: 1px solid black; 
  border-bottom: 1px solid black;

table  
  border-collapse: collapse; 

tr th  
  border-top: 1px solid black; 
  border-bottom: 1px solid black;

<table >
    <tr>
      <th>Name</th>
      <th>Id</th>
      <th>Age</th>
      <th>Status</th>
      <th>Sem</th>
      <th>Time</th>
      <th></th>
      <th></th>
    </tr>
  </table>

【讨论】：

为什么上面的边框比下面的细？

【参考方案2】：

您可以尝试在外部 div 元素上使用 ::before 和 ::after 选择器。我向div-元素添加了id 属性，以确保css 规则不会与其他元素冲突。

#table-container::after, #table-container::before 
  display: flex;
  content: "";
  height: 2px;
  background: black;
  width: 100%;

<div id="table-container">
   <table >
     <tr>
        <th>Name</th>
        <th>Id</th>
        <th>Age</th>
        <th>Status</th>
        <th>Sem</th>
        <th>Time</th>
        <th></th>
        <th></th>
      </tr>
  </table>
</div>

【参考方案3】：

您可以简单地使用border-top 和border-bottom，但是根据this 帖子，简单地将其添加到<tr> 类将不起作用，<tr> 元素本身不会带边框。您需要在表格中添加边框折叠。

实现如下：

table  
  border-collapse: collapse; 

tr:nth-child(1)  
  border-top: 1px solid black; 
  border-bottom: 1px solid black;

  <table >
    <tr>
      <th>Name</th>
      <th>Id</th>
      <th>Age</th>
      <th>Status</th>
      <th>Sem</th>
      <th>Time</th>
      <th></th>
      <th></th>
    </tr>
  </table>

【讨论】：

我得到了边框，但宽度不同，顶部的更厚

【参考方案4】：

您是否使用了<hr> 标签？或者你可以试试这个<tr style="border-bottom: 1px solid #000;"> 也在这里，你也可以试试border-top 和border-bottom 和<th> 和<tr>。