1

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

rudeTool
  • 526
  • 1
  • 11
  • 25

4 Answers4

3

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>
Harshith
  • 66
  • 2
  • 5
2

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>
John
  • 10,165
  • 5
  • 55
  • 71
1

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.

Adeesha Ashinshana
  • 9
  • 5
0

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>
Lalji Tadhani
  • 14,041
  • 3
  • 23
  • 40