title: HTML Tables + Column Widths
body: <p>So I have a table, set to a width of 40% on my page. 2 columns</p>
  
  <p>I want to have some rows with 50/50 column splits, and some rows at 25/75.</p>
  
  <p>This is currently my full styling for the table:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>table {
      width: 40%;
  }
  
  td {
      padding: 7px;
  }
  
  td.labelText {
      vertical-align: middle;
      text-align: right;
      padding-right: 10px;
      width: 50%;
  }
  
  td.editor {
      padding-left: 7px;
      width: 50%;
  }
  
  td.checklabelText {
      vertical-align: middle;
      text-align: right;
      padding-right: 10px;
      width: 75%;
  }
  td.checkeditor {
      padding-left: 7px;
      width: 25%;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Whenever I set the <code>&lt;td&gt;</code> tags to the class with 75/25, every row in the table also resizes. I know I'm doing something trivially wrong but can't get my head around it!</p>
  
  <p>Any help appreciated, thanks.</p>