title: Create HTML table with fixed width columns with CSS
body: <p>I want a table to have fixed width but dynamic height because content may be of various length. Here is an example:</p>
  
  <p><img src="https://i.stack.imgur.com/R6EDu.png" alt="alt text"></p>
  
  <p>I have fixed width but the content is overlapping. What I am doing wrong? Here is my code:</p>
  
  <pre><code>&lt;table width="60%" align='center' cellpadding='2' 
          cellspacing='2' border='2' style='table-layout:fixed'&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;#&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          ...
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>And my css:</p>
  
  <pre><code>table{
  font-size:12px;
  }
  
  table td{
      padding:5px; height:auto;
      background:#f6f6f6;
  }
  
  table thead tr th{
      background:#d7dbe2; 
  }
  </code></pre>
  
  <p>Any ideas how to make the height dynamic?</p>