html - 隐藏动态生成的 border-top 属性 <td>

Question

我有一个模态 react 组件，它呈现一个表格，该表格遍历用户/电子邮件数组 (waitList) 并将它们显示在标签中。我的目标是只删除行中的第一个 border-top 属性(见图)。

这是我的组件的一个片段，以防我的描述不清楚-

  renderTableRows() {
    const iter = [];
    if (this.props.waitList !== null) {
      this.props.waitList.map(applicant => {
        iter.push(
          <tr>
            <td>{applicant.user.name}</td>
            <td>{applicant.user.email}</td>
          </tr>
        );
      });
    }
    return iter;
  }

  render() {
    return (
      <div>
        <Modal show={this.state.waitListModalIsOpen}>
          <Modal.Header>
            WAIT LIST ({this.props.waitListCount})
          </ Modal.Header>
          <Modal.Body>
            <table className={'table wait-list-table'}>
              <tbody>
                {this.renderTableRows()}
              </tbody>
            </table>
          </ Modal.Body>
          <Modal.Footer>
            <Button onClick={() => { this.closeWaitListModal(); }}>Cancel</Button>
          </ Modal.Footer>
        </Modal>
      </div>
    );
  }
} 

我知道因为我在这里迭代每个 td nth-child 将删除提供的子参数的所有边框，而不仅仅是列表中的第一个。有没有办法可以使用 CSS 隐藏此边框？如果没有，欢迎就如何改进我的 React 组件中的迭代逻辑提出建议。

Answer 1

table tr td {border-top: solid gray 1px; }
table tr:first-child td {border-top: none;}

<table>
<tbody>
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>aa</td>
<td>bb</td>
</tr>
<tr>
<td>aaa</td>
<td>bbb</td>
</tr>
</tbody>
</table>