Javascript 缩放时css对表格布局作出反应

我在react组件中有一个表，放大时出现问题-表边框失去对齐：

将文件与表格组件进行反应：

class SubModelHeader extends Component {

  render () {
    const {years, scenarios, sources, scrollX} = this.props;
    const numScenarios = scenarios.size;
    const numSources   = sources.size;

    const scenarioRowElements = scenarios
      .toArray()
      .map((scenario, i) => (
        <td style={{width: numSources*years*400+ 'px'}} key = { 'sc' + i } >
          <h1>{ scenario.getIn(['data', 'name']) }</h1>
        </td>
      ));
    const sourceRowElements = Repeat(sources, numScenarios)
      .flatten(1)
      .toArray()
      .map((source, i) => (
        <td style={{width: years*400+ 'px'}}  key = { 'src' + i } >
          <h1>{ source.getIn(['data', 'name']) }</h1>
        </td>
      ));
    const yearRowElements = Repeat(Range(0, years), numSources * numScenarios)
      .flatten(1)
      .toArray()
      .map((year, i) => <td  className='year' key = { 'y' + i } ><h1>{ year }</h1></td>)
    ;

    return (
      <div className='sub-model-header'>

        <div style={{
            position: 'fixed',
            left: scrollX
          }}
        >
          {
            [scenarioRowElements,
              sourceRowElements,
              yearRowElements].map(
                (rowElement, i) =>
                <div key={i}>
                  <table>
                      <tr>
                        <td>
                        </td>
                        {rowElement}
                      </tr>
                  </table>
                </div>
              )
          }

        </div>
      </div>
    );
  }
}

基本css：

table {

  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;

  tr{

    td  {
      height: 50px;
      width: 400px;
      background-color: $dark-primary-color-with-opacity;
    }

  }

}

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

什么可能导致这个问题

table {

  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;

  tr{

    td  {
      height: 50px;
      width: 400px;
      background-color: $dark-primary-color-with-opacity;
    }

  }

}

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}