Предотвращение переполнения таблицы: автоматическое уменьшение размера div

Question

У меня возникли некоторые проблемы с получением нужного поведения таблицы стилей. Я даже не уверен, возможно ли это. По сути, я пытаюсь поместить таблицу с переменным числом ячеек со статической шириной ячеек в DIV с overflow: auto, и моя цель состоит в том, чтобы, когда ширина таблиц превышала ширину контейнера DIV, она становилась прокручиваемой.

Это не так. Клетки сжимаются вместе. Очень простое представление (со встроенными стилями для простоты в этом; не на самом деле в приложении хаха) кода:

<div style="width: 1000px; overflow-x: auto;">
    <table>
        <tr>
            <td style="width:400px;">
                This
            </td>
            <td style="width:400px;">
                Should
            </td>
            <td style="width:400px;">
                Scroll!
            </td>
        </tr>
    </table>
</div>

Могу ли я в любом случае сделать это с помощью CSS, или мне придется вернуться к установке ширины, встроенной во второй элемент div, содержащий таблицу, посредством вычислений?

Answer 1

Работает, если вы установите ширину на table.

<table style="width:1200px;">

td всегда будет уменьшаться до необходимого размера, он не будет толкать столшире в этой ситуации.

Answer 2

с использованием CSS можно сделать, как показано ниже, но убедитесь, что вы используете id или класс для применения css, если у вас более одной таблицы или div.

<style>
    div { width: 400px; overflow-x: auto; }
    table { width:1200px; }
    table td { width:400px; }
</style>


<div>
    <table>
        <tr>
            <td>
                This
            </td>
            <td>
                Should
            </td>
            <td>
                Scroll!
            </td>
        </tr>
    </table>
</div>