Hide border-top attribute for dynamically generated <td> - html

Question

I have a modal react component that renders a table that iterates through an array of users/emails (waitList) and displays them in a tag. My goal is to only remove the first border-top attribute in the row (see image).
Here's a snippet of my component in case my description wasn't clear-
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>
);
}
}
I understand that because I am iterating each td here that nth-child will remove all borders for the supplied child parameter, rather than just the first in the list. Is there a way I can hide this border using CSS? If not, recommendations for how to improve my iteration logic in my React component is welcomed.

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>

Answer 2

You could do something along the lines of this:
JS:
renderTableRows() {
const iter = [];
if (this.props.waitList !== null) {
this.props.waitList.map((applicant, index) => {
iter.push(
<tr>
<td className={index === 0 ? "no-border-top" : ""}>
{applicant.user.name}
</td>
<td>{applicant.user.email}</td>
</tr>
);
});
}
return iter;
}
CSS:
.no-border-top {
border-top: none;
}
You can also use inline styling like so:
renderTableRows() {
const iter = [];
const noBorderTopStyle = {
borderTop: "none"
}
if (this.props.waitList !== null) {
this.props.waitList.map((applicant, index) => {
iter.push(
<tr>
<td style={index === 0 ? noBorderTopStyle : null}>
{applicant.user.name}
</td>
<td>{applicant.user.email}</td>
</tr>
);
});
}
return iter;
}

Answer 3

Use first-child selector on your tr as follows:
tbody tr:first-child td{
border-top:0;
}