Стол шириной 100% оставляет место для плавающего дивана

Question

У меня есть таблица, которую я использую для формы.Для решения необходимо, чтобы он автоматически настраивался на два сценария:

• Когда справа от таблицы нет плавающего элемента div, я хочу, чтобы таблица занимала 100% ширины.

• Когда справа от таблицы есть плавающий элемент div, я хочу, чтобы стол выделил место для этого элемента и занял оставшееся горизонтальное пространство.

Как я могу это сделать?

Answer 1

Поместите таблицу в div с overflow, который не visible, и он займет оставшуюся область рядом с плавающим элементом. Тогда таблица внутри, которая может иметь width:100%. Код ниже и вот пример jsfiddle: http://jsfiddle.net/rgthree/uEt35/

CSS

.floater {
    float:right;
}

.tbl-container {
    overflow:hidden;
}

.tbl-container > table {
    width:100%;
}

HTML

​<div class="floater">
   This is to the right.
</div>
<div class="tbl-container">
    <table>
        <tr>
            <td>hi</td>
        </tr>
    </table>
</div>

Answer 2

Вы можете удалить div справа, используя

display:none;

Вы можете зарезервировать его пространство, используя

visibility:hidden;

Ваша таблица будет иметь ширину 100%, поэтому, когда divdisplay: none, div не будет занимать место, и таблица будет расширяться естественным образом.Если вы только скрываете div, таблица будет поддерживать меньшую ширину в зависимости от ширины div справа.

Эта информация доступна в W3Schools