要显示内联表的动态<th>表头

Question

我正在实现动态标题，用户可以在其中输入表格标题文本

所以我有一个长度为3的数组，每个索引都用“输入文本”初始化，意味着我有一个这样的数组：
    colarray[0]="enter text"
    colarray[1]="enter text"
    colarray[2]="enter text"
现在我想在表标题中显示这些索引，以内联方式显示，但是在我的情况下，它是垂直显示如何使它们水平显示？我的代码下面是：

<table id="mytable"   className="table table-striped table-nowrap dataTable" cellSpacing="0" width="100%">
  <thead>
    <tr>
      {this.state.colarray.map((coldata,ind)=>{
        return(<div>
                 <th>{coldata}</th>
               </div>)
      })}
    </tr>
   </thead>
 </table>

但是它是这样垂直显示的：

enter text
enter text
enter text

我想水平显示表头。