React.js 中的样式 table

Question

我在 React 中渲染 table 时遇到问题。我的两个主要问题是我包含的按钮在它们的部分中的样式不正确（我希望它们在它们的 div 中居中但它们离开 table），并且 table 边框变得在有按钮的区域或有空 table header 的区域切断。有人知道我做错了什么吗？

它目前的样子：

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

几件事：

您在 header 中只定义了两个 th，但在 MyTableRow 中定义了三个 td。
您的 .editButton 已设置 float: right。我认为您应该使用 text-align: center 来实现居中效果。另外，除非你需要，否则去掉填充和宽度。

React.js 中的样式 table

Styling table in React.js

javascript

css

styling

web

reactjs