I am making a react app where I have to add a full width horizontal line after and before the table header rows,How do I add it here?

 return (
    <div>
      <table width="100%">
       <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>
  );
};

here all the <th> fields are headers,I have to add a horizontal line before the header row and one after the header row.

Can someone help? Thanks

I am making a react app where I have to add a full width horizontal line after and before the table header rows,How do I add it here?

 return (
    <div>
      <table width="100%">
       <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>
  );
};

here all the <th> fields are headers,I have to add a horizontal line before the header row and one after the header row.

Can someone help? Thanks

• javascript
• html
• css
• reactjs
• html-table

• Hi, Use border-top and border-bottom on the tr tag. – Yash Maheshwari Commented Jun 11, 2021 at 2:38
• not working,no borders – rudeTool Commented Jun 11, 2021 at 2:50

4 Answers 4

You can simply use border-top and border-bottom, but simply adding that to the <tr> class will not work according to this post, The <tr> element will not take borders by itself. You will need to add a border-collapse to the table.

The implementation for this is below:

table { 
  border-collapse: collapse; 
}
tr:nth-child(1) { 
  border-top: 1px solid black; 
  border-bottom: 1px solid black;
}

  <table width="100%">
    <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>

You could try using the ::before and ::after selectors on the outer div element. I added an id attribute to the div-element to make sure the css rules don't conflict with other elements.

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

<div id="table-container">
   <table width="100%">
     <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>

Did you use the <hr> tag? or you can try this <tr style="border-bottom: 1px solid #000;"> Also Here, you can try border-top and border-bottom with <th> and <tr> also.

Add border-top & bottom on th

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 width="100%">
    <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>