Having trouble with table rendering in React. The buttons in the table cell are not styled properly and do not center within their div. Additionally, the table border is cut off where there are buttons or empty headers. Need help figuring out what's going wrong.
This is how it looks currently: https://i.sstatic.net/7XCPm.png
Relevant code: MyTable.js
export default class MyTable extends Component {
constructor(props) {
super(props);
}
render() {
var rows = [];
this.props.items.forEach(function(item) {
if (i % 2 === 0) {
rows.push(<MyTableRow item={item} key={item.name} />);
}.bind(this));
return (
<table className={styles.moduleSection}>
<thead>
<tr>
<th {‘Name’} </th>
<th className={styles.status}>{'Potential status'}</th>
</tr>
</thead>
<tbody>{rows}</tbody>
</table>
);
}
}
MyTable.css:
.moduleSection {
background-color: #fff;
border: 1px solid #ccc;
border-collapse: collapse;
border-radius: 6px;
width: 100%;
}
.status {
height: 35px;
padding: 0 20px;
text-align: right;
width: 105px;
}
MyTableRow.js:
export default class MyTableRow extends Component {
constructor(props) {
super(props);
}
render() {
const statusMap = {
1: 'Potential',
2: 'Unpotential',
};
return (
<tr className={styles.tr}>
<td className={styles.td}>{this.props.conversionTag.name}</td>
<td className={styles.status}>{item.status}</td>
<td className={styles.editButton}> <Button
text={‘Details'}
/>
</td>
</tr>
);
}
}
MyTableRow.css:
.td {
font-weight: 500;
padding: 0 20px;
}
.status {
border: 1px solid #e7e7e7;
color: #ff0000;
font-size: 14px;
font-weight: 500;
padding: 0 20px;
text-align: right;
}
.tr {
border-bottom: 1px solid #e7e7e7;
font-size: 14px;
}
.editButtonText {
padding: 7px 10px;
}
.editButton {
background: #fff !important;
border-color: #c7c7c7;
border-radius: 4px;
box-shadow: none;
color: #333 !important;
font-size: 14px;
float: right;
line-height: 16px;
padding: 7px 10px;
width: 48px;
}
Would appreciate any help, thanks!