如何在反應表中調整整個列邊框

Question

我正在嘗試調整樣式，如下圖所示

我期望是：

但是我現在得到的是：

如您所見，最后一列的邊框底部未按預期適用。

我已經嘗試過提供反應表的道具，但仍然不知道如何實現。

道具清單：

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

我應用了所有道具，我使用條件檢查它是否將應用邊框底樣式的最后一條記錄。

如果有人有任何建議或解決方案。請幫助我。

非常感謝您的好意。

Answer 1

假設lastRowIndex包含最后一行的索引，則可以定義此函數

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

並將其設置為您的反應表中的geTrProps。

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