title: How to wrap <a> elements inside of a table?
body: <p>At first, yes I did search and found a lot of similar question and no, non of the solutions worked for me.</p>
  
  <p>Now here is my main problem:</p>
  
  <p>I try to get <code>"a"</code> elements in line and wrap if there are to much to fit inside the parent <code>"td"</code>.
  But I can either get them in line or warp.</p>
  
  <p><code>"1st"</code> and "<code>2nd_main_container"</code> are in line. the <code>"1st"</code> has a fixed width <code>"2nd"</code> take the remaining space of <code>"wrapper"</code>.</p>
  
  <p>I already tried with float inlineblock adding <code>"width:100%"</code> and my last try (see code) every <code>"a"</code> in a seperate "<code>div"</code> inside another main <code>"div"</code> Floating left. They won't wrap, they just grow the main <code>"div"</code>, <code>"td"</code>, <code>"tr"</code>, <code>"table"</code> and <code>"2nd_main_container"</code>. <code>"wrapper"</code> size dose not change.</p>
  
  <p>I guess my problem is that <code>"2nd_main_container"</code> has no fixed width, but thats not an option.</p>
  
  <p>I hope someone can help me with a solution to this. Thanks in advance.</p>
  
  <p><a href="http://jsfiddle.net/p7nhjr08/4/" rel="nofollow">http://jsfiddle.net/p7nhjr08/4/</a></p>
  
  <p>here my code:</p>
  
  <pre><code>&lt;style&gt;
      #wrapper {
          width: 100%;
          white-space: nowrap;
      }
      #1st_main_container {
          display: inline-block;
          padding-left: 16px;
          padding-right: 8px;
          padding-top: 8px;
          padding-bottom: 16px;
          width: 400px;
      }
      #2nd_main_container {
          display: inline-block;
          padding-left: 8px;
          padding-right: 16px;
          padding-top: 8px;
          padding-bottom: 16px;
          vertical-align: top;
      }
      #2nd_main_container th {
          font-family: Tahoma, Geneva, sans-serif;
          font-size: 11px;
          font-weight: bold;
          text-align: right;
      }
      #2nd_main_container td {
          font-family: Tahoma, Geneva, sans-serif;
          font-size: 12px;
          font-weight: normal;
          text-align: left;
          padding-left: 20px;
      }
      #content {
          white-space: normal;
          overflow: hidden;
      }
      #content div {
          float:left;
      }
      #container a {
          padding-left: 8px;
          padding-right: 8px;
          padding-top: 0;
          padding-bottom: 0;
      }
  &lt;/style&gt;
  
  
  
  &lt;div id="wrapper"&gt;
     &lt;div id="1st_main_container"&gt;
          Something
      &lt;/div&gt;
      &lt;div id="2nd_main_container"&gt;
          &lt;table&gt;
              &lt;tbody&gt;
                  &lt;tr&gt;
                      &lt;th&gt;
                          Something:
                      &lt;/th&gt;
                      &lt;td&gt;
                          Something
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;th&gt;
                          Something:
                      &lt;/th&gt;
                      &lt;td&gt;
                          Something
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;th&gt;
                          Something:
                      &lt;/th&gt;
                      &lt;td&gt;
                          Something
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;th&gt;
                          Something:
                      &lt;/th&gt;
                      &lt;td &gt;
                          Something
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;th&gt;
                          Something:
                      &lt;/th&gt;
                      &lt;td id="container"&gt;
                          &lt;div id="content"&gt;
                              &lt;div&gt;
                                  &lt;a&gt;&lt;/a&gt;
                              &lt;/div&gt;
                              &lt;div&gt;
                                  &lt;a&gt;&lt;/a&gt;
                              &lt;/div&gt;
                              ...
                          &lt;/div&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>