Как сделать таблицу с фиксированной шириной колонок и горизонтальным скроллом?

Здравствуйте!
Есть элемент table, в строчках которого может быть некоторое число ячеек. Может быть 3 ячейки, может быть 5 или 10, но в разных строчках обязательно одинаковое количество. Ну то есть представляем нормальную, человеческую таблицу, как в экселе.
Как мне сделать через css так, чтобы:
У таблички была некоторая фиксированная ширина, скажем 700px; У каждой колонки была некоторая фиксированная ширина, скажем 300px; Если суммарная ширина ячеек больше чем ширина таблицы, то должен появляться горизонтальный скролл. Собственно это у меня никак не получается: пока ширина колонок равномерно сокращается если превышает ширину таблицы, выставление свойства overflow не помогает
Иллюстрация к тому, что я хочу: http://jsfiddle.net/yt6169s1/

1	2	3	4	5	6	7
1	2	3	4	5	6	7

.table-wrapper { width: 700px; }
.mytable { border-collapse: collapse; overflow: auto; }
.mytd { width: 300px; border: 1px solid black; }
Соответственно я хочу чтобы на примере по ссылке было видно только 1ю, 2ю колонки шириной 300px и часть 3й шириной 100px, а остальные прокручивались.
Я могу сделать это только через css, не применяя javascript и не меняя таблицу на структуру из дивов? Совместимость со всяким старьем необязательна.
Попробую переформулировать еще получше: Мне нужна некоторая область ограниченной ширины (скажем 700 px) в которую будет влезать несколько колонок фиксированной ширины (т.е. ширина колонок точно такая какую я указал, сказал 200px у каждой колонки - и будет честных 200px у каждой колонки). И если колонок больше чем надо (скажем 5), то чтобы появлялся горизонтальный скролл.
Другими словами мне надо примерно как здесь: http://jsfiddle.net/qr6e61bw/ только с таблицей а не с дивами

Ответ

В таблице пишешь table-layout: fixed. В этом режиме ширина таблицы не пересчитывается при изменении или вписывании в родительский регион, а имеющийся overflow: auto даст скроллбар снизу. Детали тут
.mytable { border-collapse: collapse; overflow: auto; table-layout: fixed; }
Адпейт: Причина оказалась в другом - атрибут width в колонке устанавливает максимальную ширину колонки, причем минимальная ширина ограничена элементами внутри колонки. В данном случае в колонках по одному символу, и минимальная ширина оказывается недостаточной для появления скролла. Лечится прописыванием min-width в стиль mytd
.mytd { min-width: 300px; border: 1px solid black; }
Для задания точной ширины колонки желательно использовать max-width или width вместе с min-width.