title: Styling table in React.js
body: <p>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?</p>
  
  <p>What it currently looks like:
  <a href="https://i.stack.imgur.com/7XCPm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7XCPm.png" alt="enter image description here"></a></p>
  
  <p>Relevant code:
  MyTable.js: </p>
  
  <pre><code>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(&lt;MyTableRow item={item} key={item.name}  /&gt;);
      }.bind(this));
  
      return (
          &lt;table className={styles.moduleSection}&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th {‘Name’} &lt;/th&gt;
                      &lt;th className={styles.status}&gt;{'Potential status'}&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;{rows}&lt;/tbody&gt;
          &lt;/table&gt;
      );
  }
  }
  </code></pre>
  
  <p>MyTable.css:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>MyTableRow.js:</p>
  
  <pre><code>export default class MyTableRow extends Component {
  constructor(props) {
      super(props);
   }
  
  render() {
      const statusMap = {
          1: 'Potential',
          2: 'Unpotential',
      };
  
      return (
          &lt;tr className={styles.tr}&gt;
              &lt;td className={styles.td}&gt;{this.props.conversionTag.name}&lt;/td&gt;
              &lt;td className={styles.status}&gt;{item.status}&lt;/td&gt;
              &lt;td className={styles.editButton}&gt; &lt;Button
                      text={‘Details'}
                  /&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      );
  }
  }
  </code></pre>
  
  <p>MyTableRow.css:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>Any help would be appreciated! thanks!</p>