title: How to make a table with equal column widths in CSS?
body: <p>I have a document containing a table like this:</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
          &lt;td&gt;
              Word
          &lt;/td&gt;
          &lt;td&gt;
              Definition
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;
              Word
          &lt;/td&gt;
          &lt;td&gt;
              Definition
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;
              Word
          &lt;/td&gt;
          &lt;td&gt;
              Definition
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Using CSS, I need to set all of the cells to 50% width, with text in the left "column" being right-aligned and text in the left column being left-aligned. I've tried many different options, e.g. <code>width: 50%; text-align: left</code>, but the results are always unusual. The results should look like this:</p>
  
  <pre><code> _________________________
  |       word | definition |
  |____________|____________|
  |       word | definition |
  |____________|____________|
  </code></pre>
  
  <ul>
  <li>I cannot adjust the table's actual code directly. I can only modify the CSS style.</li>
  <li>The answer in <a href="https://stackoverflow.com/questions/20375288/make-columns-of-equal-width-in-table">Make columns of equal width in &lt;table&gt;</a> is not suitable, because I do not know the width of the page, and that width might vary.</li>
  </ul>
  
  <p>How can I set equal-width cells in a two-column table in CSS with everything aligned to the middle?</p>