表 - 宽度百分比与溢出不工作

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