Турель вертикальная полоса прокрутки БЕЗ фиксированной ширины

Question

Точно так же, как в заголовке. В этом вопросе есть сотни сообщений, и все ответы заставляют меня использовать фиксированную ширину, но это не настоящий мир.

Я хочу, чтобы мой td использовал % и по-прежнему имеет tbody прокручиваемый.

Я хочу, что спросил Исаак Betesh в comment на answer на этот вопрос «How to apply vertical scrollbar for TBODY»:

Этот пример имеет точную ширину пикселей для каждого тд и й. Есть ли способ использовать% width вместо px и выполнить то же самое?

Edit: Не хочет включать десятки примеров, потому что они все более переполнение стека, но это классические один: JSFiddle.

Если вы просто изменить содержание в thead, как это: JSFiddle, все это выходит из синхронизации между thead и tbody.

Раствор

display:block; 

не работает.

Answer 1

прокрутки, который добавляется к TBODY проблема, я установил ширину THEAD в width: calc(100% - 17px) и некоторые другие CSS и проблема решена, это working example и это то, что я добавил в свой CSS:

thead, tbody, tr, td { display: block} 
thead { 
     width: calc(100% - 17px); 
} 
tbody td, thead td { 
    width: 40%; 
    display:inline-block 
} 
table { 
    background-color: #aaa; 
    width:50% 
}