I’m having a problem rendering a table in React. My two main problems are the buttons I am including are not properly styled within their section (I want them centered within their div but they go off the table), and the table border gets cut off in the areas where there are buttons or where there is an empty table header. Does anyone have an idea as to what I’m doing wrong?

What it currently looks like:

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

Any help would be appreciated! thanks!

I’m having a problem rendering a table in React. My two main problems are the buttons I am including are not properly styled within their section (I want them centered within their div but they go off the table), and the table border gets cut off in the areas where there are buttons or where there is an empty table header. Does anyone have an idea as to what I’m doing wrong?

What it currently looks like:

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

Any help would be appreciated! thanks!

• javascript
• css
• web
• reactjs
• styling

1 Answer 1

A couple of things:

• You are defining only two ths in your header but three tds on your MyTableRow.

• Your .editButton has float: right set. I think you should use text-align: center for the centering effect. Also, get rid of padding and widths unless you need them.