таблица - td ширина в процентах с переполнением не работает

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 имеет гибкие таблицы, которые будут прокручиваться так, как вы указываете при небольших размерах. Посмотрите на это:

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