title: css - stretched and evenly spaced horizontal menu
body: <p>I hope, you can help me, I have a horizontal menu, my problem is the following:</p>
  
  <p><img src="https://i.stack.imgur.com/HvBff.png" alt="enter image description here"></p>
  
  <p>The first is normal stretch with table, the second is what I want: <strong>stretch + even gaps between texts</strong>.</p>
  
  <p>I achieved this with additional non breaking spaces, but it works only by fixed menu widths, so if I change the menu width I have to change the count of the nbsp characters. Is there any way to do this with css, and without those non breaking spaces?</p>
  
  <p><strong>The count of the menupoints and the menu width can change, so I need an automatical solution without javascript. No settings by individual columns, unless you can give me an algorithm which I can run on server side.</strong></p>
  
  <p>I don't think this is possible with css only, but I'm not a css guru, that's why I asked....</p>
  
  <pre><code>&lt;style&gt;
      * {
          margin: 0px;
          padding: 0px;
          font-size: 16px;
      }
  
      table {
          width: 400px;
      }
  
      td {
          border: 1px solid blue;
          text-align: center;
      }
  &lt;/style&gt;
  
  &lt;table&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;a href="#"&gt;aa&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt;&lt;a href="#"&gt;aaaaaaaaaaaaa&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt;&lt;a href="#"&gt;aaaaaaaaa&lt;/a&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  
  
  &lt;table&gt;
      &lt;tr&gt;
          &lt;td&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;a href="#"&gt;aa&lt;/a&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/td&gt;
          &lt;td&gt;&amp;nbsp;&amp;nbsp;&lt;a href="#"&gt;aaaaaaaaaaaaa&lt;/a&gt;&amp;nbsp;&amp;nbsp;&lt;/td&gt;
          &lt;td&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;a href="#"&gt;aaaaaaaaa&lt;/a&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>