Держите ширину ячейки таблицы фиксированной, когда внутри div переполнения - PullRequest
Новая
       25

Держите ширину ячейки таблицы фиксированной, когда внутри div переполнения

1 голос
/ 02 марта 2012

Пожалуйста, смотрите код внизу поста. Внутри дивана есть стол. Когда переменная $size мала, например, 2 или 3, и все ячейки могут легко помещаться внутри div, ширина ячеек <th> контролируется правильно, чтобы иметь ширину 100px. Если вы измените переменную $size: $size = 20, вы увидите, что ячейки таблицы <th> сжимаются, чтобы поместиться в элемент div, даже если у него есть свойство overflow:auto. Я вижу то же самое для overflow:scroll.

То, что я хотел бы видеть, это то, что ширина ячейки таблицы остается постоянной на уровне 100px, и div вводит полосу прокрутки для прокрутки, чтобы увидеть все ячейки. Я не хочу, чтобы ширина ячеек уменьшалась, даже если $size == 1000.

Как заставить таблицу сохранить width : 100px, даже если она больше родительского div? И пусть родительский div будет доступен для прокрутки. 

<style type="text/CSS">

    .headrow {
        border : 1px solid;
        width : 100px;
        height : 40px;
    }

table {
    table-layout: fixed;
}

</style>


<div id="b" style="border:1px solid;width:585px;height:60px;overflow:auto;">
    <table>
        <tr>
            <?php
            $size = 20;
                for ($i=0;$i<$size;$i++){
                    echo '<th class="headrow"></th>';
                }
            ?>
        </tr>
    </table>
</div>

1 Ответ

4 голосов
/ 02 марта 2012

Обновите свой CSS до этого: 

table {
    table-layout: fixed;
    width: 100%;
}

Посмотреть в действии .

...