title: How to align table header and textarea's content
body: <p>Is it possible to align <strong>textarea's content</strong> with <strong>table's header</strong>? I tried <code>&amp;nbsp;</code> but it's not good for responsive design, any suggestions?</p>
  
  <p>Update, expected output:
  <a href="https://i.stack.imgur.com/CuQUt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CuQUt.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;tbody&gt;
  &lt;tr&gt;
    &lt;th&gt;Date&lt;/th&gt;
    &lt;th&gt;Number&lt;/th&gt; 
    &lt;th&gt;Line&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td colspan="3" align="center"&gt;
      &lt;textarea id="log" wrap="hard" readonly="1" style="width:100%; height:100px; resize: none;"&gt;
  Jan  1 00:00:31     111     line 5
  Jan  1 00:00:45     111     line 10 
  Jan  1 00:00:08     222     line 2 
  Jan  1 00:00:31     333     line 111
  Jan  1 00:00:45     333     line 20 
      &lt;/textarea&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/tbody&gt;</code></pre>
  </div>
  </div>
  </p>