在React.js中使用固定表头时无法设置表头的宽度

Question

我有一个带标题的表，但无法更改标题的宽度。我想用固定标题制作表格。 但是我固定的标题类列标题和数据变得未对齐。

如何使它工作？

JSX代码

 <div className="table-responsive">
      <table className="table-hover fixed_header">
         <thead>
            <tr>
              {this.props.columns.map(col=>{
                return <th key={col} >{col}</th>
              })}
            </tr>
          </thead>
          <tbody>
            {this.props.data.map((item,index)=>(
              <tr key={item+index} >
                {item.map((i,index1)=>{
                  return <td key={index1+"+"+i}>{i}</td>
                })}
              </tr>)            
              )}
          </tbody>
        </table>
      </div>

CSS

.fixed_header tbody{
    display:block;
    overflow:auto;
    height:80vh;
    width:100%;
  }
  .fixed_header thead tr{
    display:block;
  }

  .fixed_header th, .fixed_header td{
      box-sizing: content-box;
      width: 30%;
  }