title: CSS table column widths not working
body: <p>(I thought I might find an answer in <a href="https://stackoverflow.com/questions/4457506/set-the-table-column-width-constant-regardless-of-the-amount-of-text-in-its-cell">Set the table column width constant regardless of the amount of text in its cells?</a>, but none of the solutions there seem to work for me.)</p>
  
  <p>I would like to build a table with two columns, one 30% of the text area width and the other filling the remaining space. Between cells I need about 1em of space so I can apply distinct borders around each cell. This is the current code:</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-css lang-css prettyprint-override"><code>    table.condform {
        margin-left: 50px;
        margin-top: 1em;
        table-layout: fixed;
        width: 80%;
        font-family: Courier, monospace;
        font-size: xx-small:
        padding: 0;
        border-collapse: separate;
        border-spacing: 2em;
        border: none;
      }
      
      table.condform td {
        padding: 0.1em 0.2em 0.3em 0.2em;
        min-height: 1em;
        vertical-align: top;
      }
      
      table.condform td:first-of-type {
        width: 40%;
      }
      
      table.condform td:nth-of-type(2) {
        width: auto;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;table class="condform"&gt;
      &lt;colgroup&gt;
        &lt;col style="width: 40%;"&gt;
        &lt;col style="width: auto;"&gt;
      &lt;/colgroup&gt;
      &lt;tr&gt;
       &lt;td style="border: red 1px solid; background-color: #ff0"&gt;a&lt;/td&gt;
       &lt;td&gt;b&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
       &lt;td style="border: blue 1px solid; background-color: #0ff"&gt;a&lt;/td&gt;
       &lt;td&gt;b&lt;/td&gt;
      &lt;/tr&gt;
      &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Regardless of what I do the cells shrink down to fit their contents, and nothing I do seems to affect cell spacing:</p>
  
  <p><a href="https://i.stack.imgur.com/o0NCD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/o0NCD.png" alt="Shrunk table"></a></p>
  
  <p>I've tried six or seven different fixes now, including all the ones in the link above, but to no avail. Surely setting column widths and cell spacing can't be beyond the abilities of CSS?</p>
  
  <p>EDIT 20161221 1040: Setting <code>td</code> width values in pixels works, but I'm not keen on specifying pixel values if I can help it.</p>
  
  <p>EDIT 20161221 1052: Looking in the element inspector it seems that the table class isn't applying properly. It's a <code>table</code>, its class is <code>condform</code>, but none of that class's styles are showing up in the style field. (I know there are blank properties, but they shouldn't be causing any trouble and haven't elsewhere.) Subordinate styles are still applying properly, as evidenced by the fact that pixel widths work.</p>
  
  <p><a href="https://i.stack.imgur.com/Ona9m.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ona9m.png" alt="Stylesheet vs displayed page"></a></p>
  
  <p>I'm flummoxed now.</p>