Есть ли способ обрезать (скрыть) широкую ячейку таблицы?

Question

Я пытаюсь реализовать таблицу, которая охватывает всю ширину браузера.

Эта таблица содержит 3 ячейки таблицы. Первая и последняя ячейка являются «фиксированными». Это означает: он должен быть виден постоянно: первая ячейка на левой границе окна браузера, последняя ячейка на правой границе окна браузера.

2-я ячейка (в середине) содержит еще одну таблицу с множеством ячеек и разной длины / ширины. Назовем эту таблицу "content-table"

так может выглядеть вот так;

[первая ячейка] | [content1 | content2 | content3 | content4] | [последняя ячейка]

Проблема в том, что «таблица содержимого» может содержать много содержимого. Поскольку «первая ячейка» и «последняя ячейка» должны быть видны все время, слишком крупная «таблица конкурентов» должна быть частично скрыта.

Наконец, мне нужно что-то вроде «переполнение: скрытый», но это не работает с ячейками таблиц. (похоже, это не работает?)

У меня есть маленький jsfiddl, чтобы показать проблему: http://jsfiddle.net/thirtydot/YRgwB/3/

Я работаю над этой проблемой со вчерашнего дня - без какой-либо идеи!

Надеюсь на любую помощь здесь.

Answer 1

См .: http://jsfiddle.net/thirtydot/YRgwB/6/

• Я добавил width:100%; table-layout:fixed; к вашему внешнему table.
• Я обернул div с overflow: hidden вокруг твоего "широкого стола".
• Это работает во всех современных браузерах.

<table border="1" style="width:100%; table-layout:fixed;">
    <tr>
        <td>first cell</td>
        <td>
            <div style="overflow:hidden; border:1px solid red;">
                <table>
                    <tr>
                        <td style="min-width:90px;">lot</td>
                        <td style="min-width:90px;">of</td>
                        <td style="min-width:90px;">content</td>
                    </tr>
                </table>
            </div>
        </td>
        <td>last cell</td>
    </tr>
<table>