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

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