title: Want to show dynamic <th> table headers of table inline
body: <p>I am implementing dynamic headers,where user can enter it owns table header text</p>
  
  <p>So I have an array of length 3, each index initialized with "enter text",means I have an array like this:<br>
      <code>colarray[0]="enter text"</code><br>
      <code>colarray[1]="enter text"</code><br>
      <code>colarray[2]="enter text"</code><br>
  now I want to show these index in table header,displaying inline, However in my case it is showing in vertical how I make them horizontal? below my code is:</p>
  
  <pre><code>&lt;table id="mytable"   className="table table-striped table-nowrap dataTable" cellSpacing="0" width="100%"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        {this.state.colarray.map((coldata,ind)=&gt;{
          return(&lt;div&gt;
                   &lt;th&gt;{coldata}&lt;/th&gt;
                 &lt;/div&gt;)
        })}
      &lt;/tr&gt;
     &lt;/thead&gt;
   &lt;/table&gt;
  </code></pre>
  
  <p>But it is showing  in vertical like this:</p>
  
  <pre><code>enter text
  enter text
  enter text
  </code></pre>
  
  <p>Whereas I want to show table header horizontal.</p>