title: Columns are not fully spanning a three column table
body: <p>I'm brand new to html, so I'm sure this is a basic question.</p>
  
  <p>I have a table with three columns. I want the first column to span 40% of the width of the table, the second 30% and the third 30%. I have the whole table in a div. But the columns are not spanning the entire table:</p>
  
  <p><img src="https://i.stack.imgur.com/QwuEo.png" alt="enter image description here"></p>
  
  <p>Here is my html:</p>
  
  <pre><code>&lt;div class="TableWrap"&gt;
      &lt;table id="PowerPlantTable" border="1"&gt;
  
          &lt;thead&gt;
              &lt;tr bgcolor="silver"&gt;
                  &lt;th class="firstColumn"&gt;Power Plant&lt;/th&gt;
                  &lt;th class="secondColumn"&gt;MW Output&lt;/th&gt;
                  &lt;th class="thirdColumn"&gt;MW Capacity&lt;/th&gt;
              &lt;/tr&gt;  
          &lt;/thead&gt;
  
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;td&gt;BRUCEA-G2&lt;/td&gt;
                  &lt;td&gt;0&lt;/td&gt;
                  &lt;td&gt;0&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here is my css:</p>
  
  <pre><code>.TableWrap{
      margin: 15px;
      text-align: center;
  }
  
  #PowerPlantTable{
      display:block;
      margin-left: auto;   
      margin-right: auto;
      font-size:12.0px;
  }
  
  .firstColumn{
     width:40%;
  }
  
  .secondColumn{
      width:30%;
  }
  
  .thirdColumn{
      width:30%;
  }
  </code></pre>
  
  <p>What am I doing wrong?</p>