title: How do I distribute whitespace equally between columns in a HTML table?
body: <p>I have a HTML table that has a fixed width of 1000 px (say), which is much greater than needed to accommodate the text in the table. It looks like:</p>
  
  <p><img src="https://i.stack.imgur.com/JCq4k.png" alt="enter image description here">
  The "Salary" column has right-aligned text, while the other columns have left-aligned text. (I've added the pink and green backgrounds so that you can see how it's getting laid out. It's not part of the actual table.)</p>
  
  <p>How do I ask it to put equal whitespace between the columns? In other words, in the following screenshot:</p>
  
  <p><img src="https://i.stack.imgur.com/nmoXN.png" alt="enter image description here"></p>
  
  <p>I've added two green rectangles to illustrate the whitespace between the columns (more precisely, between the last visible pixel in one column to the first visible pixel in the next). I want these two green rectangles to be of the same <em>width</em>. How do I do that? Is it even possible in HTML?</p>
  
  <p>Keep in mind that the text is dynamic — we don't know ahead of time what text will appear in each column, or how wide it will be.</p>
  
  <p>Here's the code I used:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table style="width:1000px;"&gt;
    &lt;tr&gt;
      &lt;th style="text-align:left; background-color:#FFFFFF"&gt;Name&lt;/th&gt;
      &lt;th style="text-align:right;"&gt;Salary&lt;/th&gt;
      &lt;th style="text-align:left; background-color:#FFFFFF"&gt;Title&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td style="text-align:left; background-color:#FFFFFF"&gt;Kartick&lt;/td&gt;
      &lt;td style="text-align:right;"&gt;10&lt;/td&gt;
      &lt;td style="text-align:left; background-color:#FFFFFF"&gt;Director of Nothing&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td style="text-align:left; background-color:#FFFFFF"&gt;Neha&lt;/td&gt;
      &lt;td style="text-align:right;"&gt;200&lt;/td&gt;
      &lt;td style="text-align:left; background-color:#FFFFFF"&gt;Minister of Awesome&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td style="text-align:left; background-color:#FFFFFF"&gt;Vijay&lt;/td&gt;
      &lt;td style="text-align:right;"&gt;3000&lt;/td&gt;
      &lt;td style="text-align:left; background-color:#FFFFFF"&gt;VP of Buzzwords&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>PS: Please ignore the use of inline styles. This is throwaway code.</p>