表 - 寬度百分比與溢出不工作

Question

我想建立一個表，其中包含td其中width設置百分比和溢出水平滾動條。

不幸的是，我沒有設法做到這一點。

http://jsfiddle.net/ne45s2wf/1/

HTML

<div class="container"> 
    <table> 
     <tbody> 
      <tr> 
       <td>cell 1 
       </td> 
       <td>cell 2 
       </td> 
       <td class="too-long">cell 3 loooooooooooooooooooooooooooooooooooooooooooong 
       </td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

CSS

.container { 
    position: relative; 
    max-width: 500px; 
    background-color: red; 
} 

table { 
    width: 100%; 
} 

td.too-long { 
    background-color: darkgreen; 
    display: inline-block; 
    width: 20%; 
    overflow-x: scroll; 
} 

1. 我想知道的第一件事是什麼td -width相對百分比？是否有可能將其設置爲相對於table？

2. 我會設置td與overflow hidden的最大寬度百分比。雖然這適用於td，但當其寬度設置爲百分比時，父容器不會將其寬度與td孩子對齊。父母的寬度就好像孩子沒有設置寬度一樣。此外，該表現在不再「響應」了。

Answer 1

我會看看bootstrap。我不確定你的意思是什麼，但似乎你的表格有溢出問題。 Bootstrap具有響應式表格，可以按小尺寸指定的方式進行滾動。看看這個：

http://getbootstrap.com/css/#tables-responsive