React.js 中的样式表

Question

我在 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;
}

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

Answer 1

有几点：

• 您在标题中只定义了两个ths，但在MyTableRow 上定义了三个tds。

• 您的.editButton 设置了float: right。我认为您应该使用text-align: center 来获得居中效果。此外，除非您需要，否则不要使用填充和宽度。