Border collapse with rounded edges?

Question

I am trying to render a React table that has no borders but has rounded edges. I tried using border-collapse: collapse, which removed the borders that were appearing between columns in the table, but it also removed the border-radius property I had set. Does anyone have an idea as to how to accomplish this?

Here is how I am styling the table. Note I do not specify borders anywhere, but they are still appearing.

moduleSection {
    border-radius: 4px;
    background-color: #fff;
}

And here is how I create the table in my JS file:

renderRow = (item) => {
    return (
        <tr key={item.id}>
            <td>
                {item.name}
            </td>
            <td>
                <div>
                    {item.status}
                </div>
            </td>
        </tr>
    );
}

render() {
        const items = this.props.items;

        return (
            <table className={styles.moduleSection}>
                <thead>
                    <tr>
                        <th>
                            <div>
                                Your Items
                            </div>
                        </th>
                        <th>
                            <div>
                                Item Status
                            </div>
                        </th>
                    </tr>
                </thead>
                <tbody>{items.map(this.renderRow)}</tbody>
            </table>
        );
    }

Answer 1

Here is a table with the css working. You must be having some conflicting css that overrides these styles. This is exactly as you posted in the question. And it seems to be working. See the fiddle.

Sample HTML:

<table class="moduleSection">
  <tr>
    <td>
      testing
    </td>
    <td>
      table
    </td>
  </tr>
  <tr>
    <td>
      testing
    </td>
    <td>
      table
    </td>
  </tr>
</table>

CSS:

.moduleSection {
    border-radius: 10px;
    background-color: #fff;
}

See this fiddle: https://jsfiddle.net/8s8jnmw7/

And it even works with border collapse added:

https://jsfiddle.net/8s8jnmw7/1/

I have tested this in chrome, firefox and IE Edge.

Answer 2

Here's an example using a wrapper div :

<div style="display: table;
            padding: 2px;
            border-radius: 5px;
            border: 1px solid #999;">
  <TABLE style="border-collapse: collapse;">
    <THEAD>
      <TR style="background-color: red;">
        <TH>Weekday</TH>
        <TH>Date</TH>
        <TH>Manager</TH>
        <TH>Qty</TH>
      </TR>
    </THEAD>
    <TBODY>
      <TR>
        <TD>Mon</TD>
        <TD>09/11</TD>
        <TD>Kelsey</TD>
        <TD>639</TD>
      </TR>
      <TR>
        <TD>Tue</TD>
        <TD>09/12</TD>
        <TD>Lindsey</TD>
        <TD>596</TD>
      </TR>
      <TR>
        <TD>Sun</TD>
        <TD>09/17</TD>
        <TD>Susan</TD>
        <TD>272</TD>
      </TR>
    </TBODY>
  </TABLE>
</div>

Note: display:table; is not supported in IE7 and earlier. IE8 requires a: !DOCTYPE in the document. All modern browsers (including IE9) support it though, so it shouldn't be a problem.

Answer 3

Try changing border-radius = 4px; to border-radius:4px; and add border:none;