爲什麼我的表格列不會尊重50％的最大寬度？

我想獲取一個表列來擴展以填充它的內容，直到它佔用整個表的寬度的50％（或任意％）。我已經將列中的每個單元格（包括標題）設置爲具有其css風格的max-width: 50%;。我已驗證該規則未被另一個最大寬度覆蓋。爲什麼我的表格列不會尊重50％的最大寬度？

固定像素金額max-width工作正常。只有百分數似乎沒有生效。

我試過簡化它到一個可重現的例子，看看是否有其他一些隱晦的佈局或CSS怪癖造成的問題，我仍然能夠重現它。

的jsfiddle：http://jsfiddle.net/8Lmtvzur/1/

HTML：

<table class="data"> 
    <thead> 
     <tr> 
      <th>Entry Header 1</th> 
      <th>Entry Header 2</th> 
      <th>Entry Header 3</th> 
      <th class="asdf">Entry Header 4</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Entry First Line 1</td> 
      <td>Duis sollicitudin ipsum diam, cursus tristique lorem placerat.</td> 
      <td>Entry First Line 3</td> 
      <td class="asdf">Entry First Line 4</td> 
     </tr> 
     <tr> 
      <td>Entry Line 1</td> 
      <td>Duis sollicitudin ipsum diam, cursus tristique lorem placerat.</td> 
      <td>Entry Line 3</td> 
      <td class="asdf">Entry Line 4</td> 
     </tr> 
     <tr> 
      <td>07/07/2014 11:51 am</td> 
      <td>Duis sollicitudin ipsum diam, cursus tristique lorem placerat.</td> 
      <td>Entry Last Line 3</td> 
      <td class="asdf"> 
       Nullam consectetur pretium tristique. Vestibulum facilisis dapibus vulputate. Sed et arcu ac arcu pretium porttitor. Nullam quis ante.<br/> 
       <br/> 
       Donec at condimentum nunc. Maecenas in arcu ligula. Etiam dictum metus massa, eu dignissim nibh tempor a. Maecenas.<br/> 
       <br/> 
       Donec ac turpis felis. Sed blandit dignissim convallis. In hac habitasse platea dictumst. Pellentesque pretium, sem ac pellentesque gravida, velit erat semper nisi, placerat posuere dui augue non nunc. Curabitur id augue at turpis vestibulum suscipit. Suspendisse lacinia imperdiet metus sit amet lobortis. Proin nec mi lectus. Nam rutrum maximus felis quis congue. Vivamus nec augue felis. 
      </td> 
     </tr> 
     <tr> 
      <td>03/18/2015 11:05 am</td> 
      <td></td> 
      <td>blah</td> 
      <td>testing 1 2 3 <br/> 
       4 56</td> 
     </tr> 
    </tbody> 
</table>

CSS：

table { 
    border-spacing: 0; 
    border-collapse: collapse; 
} 

table tr td, table tr th { 
    font-size: 10.6667px; 
    font-family: Osaka, verdana, sans-serif; 
    vertical-align: top; 
    border: 1px #DDDDDD solid; 
    padding: 2px; 
} 

td.asdf, th.asdf { 
    max-width: 10%; 
}

來源

2015-09-29 Martin Carney

MAX- *和* MIN-可能並不總是與表格的佈局工作，你可以google「最大寬度的表格單元格」，看看，但你不能使用寬度：10％呢？ – Stickers

http://stackoverflow.com/questions/18367959 – SpiRT