Горизонтальная прокрутка при переполнении таблицы ⇐ CSS

[Anonymous]

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

Код: Выделить всё

.search-table-outter {margin-bottom:30px; }
.search-table{table-layout: fixed; margin:40px auto 0px auto;  overflow-x:scroll; }
.search-table, td, th{border-collapse:collapse; border:1px solid #777;}
th{padding:20px 7px; font-size:15px; color:#444; background:#66C2E0;}
td{padding:5px 10px; height:35px;}
tr:nth-child(even)  {background: #f5f5f5;}
tr:nth-child(odd)   {background: #FFF;}

HTML

Код: Выделить всё

Col1
col2
col3
col4
col5
col5

JS-скрипт (Примечание: если возможно, я бы хотел, чтобы горизонтальная полоса прокрутки находилась в контейнере с красной рамкой):
http://jsfiddle.net/ZXnqM /3/

Подробнее здесь: https://stackoverflow.com/questions/197 ... w-of-table