<div id="app"></div>
:root {
  font-size: calc(1rem + 0.5vw);
  font-family: sans-serif;
  margin: 1rem;
}

body {
  overflow-x: hidden;
}

th, td {
  border: 2px solid #000;
  padding: 0.75rem;
  text-align: left;
}

th {
  font-weight: bold;
}

th {
  background: #000;
  color: #fff;
}

tr:first-child th:not(:last-child) {
  border-right-color: #fff;
}

tr:first-child th:first-child,
tr:not(:first-child):not(:last-child) th {
  border-bottom-color: #fff !important;
}

caption {
  margin-bottom: 0.5rem;
  font-style: italic;
  text-align: left;
}
class Table extends React.Component {
  render() {
    return (
      <table>
        <caption>{this.props.caption}</caption>
        <tr>
          {this.props.headers.map((header, i) => 
            <th scope="col" key={i}>{header}</th>
          )}
        </tr>
        {this.props.rows.map((row, i) => 
          <tr key={i}>
            {row.map((cell, i) =>
              (this.props.rowHeaders && i < 1) ? (
                <th scope="row" key={i}>{cell}</th>
              ) : (
                <td key={i}>{cell}</td>
              )
            )}
          </tr>
         )}
      </table>
    );
  }
}

const headers = ['Band', 'Singer', 'Inception', 'Label'];

const rows = [
  ['Napalm Death', 'Barney Greenway', '1981', 'Century Media'],
  ['Carcass', 'Jeff Walker', '1985', 'Earache'],
  ['Extreme Noise Terror', 'Dean Jones', '1985', 'Candlelight'],
  ['Discordance Axis', 'Jon Chang', '1992', 'Hydrahead']
];

/*
 * A simple React component
 */
class Application extends React.Component {
  render() {
    return (
      <div>
        <Table rows={rows} headers={headers} rowHeaders caption="Grindcore bands" />
      </div>
    );
  }
}

/*
 * Render the above component into the div#app
 */
ReactDOM.render(<Application />, document.getElementById('app'));
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.