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

Question

我有一个模态反应组件，它呈现一个遍历用户/电子邮件数组（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 组件中的迭代逻辑的建议。

标签： htmlcssreactjstwitter-bootstrap

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>