如何在反应表中调整整个列边框

Question

I'm trying to adjust style as the screenshot below

What I expect to be:

But what I got now is:

As you can see the border bottom of last column not apply to as expect.

I already try props which react-table provided but still can't figure out how to achieve it.

Props list which apllied:

1. styles
2. getProps
3. getTheadGroupTrProps
4. getTrProps
5. getTbodyProps
6. getTdProps

All props that I applied, I used the condition to check if it the last record it will apply border-bottom style.

If anyone has any suggestion or any solutions.Help me please.

Thank you so much for your kindness.

Answer 1

Assuming lastRowIndex contains the index of your last row, you can define this function

const styleRow = (state, rowInfo) => {
  if (!rowInfo) return
  return {
    style: {
      borderBottom: rowInfo.index === lastRowIndex? ˋ1px solid;ˋ : ˋˋ
    }
  }
}

and set it as geTrProps in your react-table.

Answer 2

<table class="table" id="table_Container">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>


       #table_Container tr th:last-child{ border-right: 1px solid red; border-left:1px solid red}
#table_Container tr td:last-child{ border-right: 1px solid red; border-left:1px solid red}
#table_Container tr:last-child td:last-child{border-bottom:1px solid red}
#table_Container tr td{border-top: 2px solid #dee2e6;}