title: Table caption not resizing container on IE/Edge with white-space: nowrap
body: <p>Hi I'm working on a menu with Bootstrap 4 Alpha 6. It is working well on Chrome 60 and FF 54. But on Edge and IE I'm getting ploblemns with table caption. It isn't expanding table width as FF and Chrome does.</p>
  
  <p>I used the table aproach to vertically center the image and align bottom the caption. I believe that the problemn is related with white-space: nowrap.</p>
  
  <p>I also tried the add table-layout: fixed, without success.</p>
  
  <p>FF/Chrome</p>
  
  <p><a href="https://i.stack.imgur.com/9hdgO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9hdgO.png" alt="FireFox/Chrome"></a></p>
  
  <p>IE/Edge</p>
  
  <p><a href="https://i.stack.imgur.com/nuB4K.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nuB4K.png" alt="IE/Edge"></a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;nav class="hidden-md-down menu-desktop navbar navbar-toggleable-xl"&gt;
      &lt;div class="container-fluid"&gt;
          &lt;ul class="navbar-nav mx-auto "&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a href="/pulverizacao" class="nav-link"&gt;
                      &lt;div&gt;
                          &lt;img src="pulverizacao.png" alt="Pulverização"&gt;
                      &lt;/div&gt;
                      &lt;span&gt;Pulverização&lt;/span&gt;
                  &lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a href="/equipamentos" class="nav-link"&gt;
                      &lt;div&gt;
                          &lt;img src="equipamentos.png" alt="Equipamentos"&gt;
                      &lt;/div&gt;
                      &lt;span&gt;Pulverização&lt;/span&gt;
                  &lt;/a&gt;
              &lt;/li&gt;
               .
               .
               .
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.menu-desktop {
      background-color: @fundo-menu;
      border-bottom: 3px solid @borda-inferior-menu;
  }
  
  .menu-desktop ul &gt; li {
      text-align: center;
      transition: .5s;
      border-right: 0.2rem groove @borda-lateral-menu;
      padding-right: 1rem;
      padding-left: 1rem;
      display: table;
  }
  
  .menu-desktop ul &gt; li:last-child {
      border-right: none;
  }
  
  .menu-desktop ul &gt; li:hover {
      background-color: @fundo-menu-hover;
  }
  
  .menu-desktop ul &gt; li &gt; a {
      height: 5rem;
      padding-bottom: 0;
      padding-top: 0;
      display: table;
      width: 100%;
  }
  
  .menu-desktop ul &gt; li &gt; a &gt; div {
      display: table-cell;
      vertical-align: middle;
  }
  
  .menu-desktop ul &gt; li &gt; a &gt; span {
      color: #fff;
      font-weight: 700;
      text-transform: uppercase;
      display: table-caption;
      caption-side: bottom;
      white-space: nowrap;
  }
  
  .menu-desktop ul &gt; li:hover .menu-desktop-mais {
      display: table;
   }
  </code></pre>