javascript - React.js中的样式表

我在React中呈现表格时遇到问题。我的两个主要问题是我所包含的按钮在其部分中的样式不正确（我希望它们在其div中居中，但它们不在桌子上），并且在有按钮或有按钮的区域中表格的边框被切断了。是一个空表头。有人知道我在做什么错吗？

目前的样子：


相关代码：
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;
}

任何帮助，将不胜感激！谢谢！

最佳答案

有两件事：


您在标题中仅定义了两个th，但在td中定义了三个MyTableRow。
您的.editButton已设置float: right。我认为您应该使用text-align: center来获得居中效果。另外，除非需要它们，否则请除去填充和宽度。