Я с трудом пытаюсь сделать контейнер DIV подходящим и изменяющим размеры в соответствии с родительским TD, а не в соответствии с содержанием DIV.Вот чего я хочу достичь:
- Родительская таблица всегда должна вписываться в экран, поэтому ширина устанавливается на 100%
- Левый столбец имеет фиксированный размер для отображения меню
- Размер правого столбца (содержимого) должен изменяться в соответствии с шириной браузера
- В TD содержимого я использую тег DIV для прокрутки таблицы содержимого (авто переполнение)
Я ожидал, что DIV прокрутит содержимое (по горизонтали) и изменит его ширину в родительском TD.Но DIV расширяется, и полосы прокрутки IE используются вместо полос прокрутки DIV.
Вот что я пробовал до сих пор:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<table border="1" width="100%">
<colgroup>
<col width="200px" />
<col width="*" />
</colgroup>
<tr>
<td>
<div style="width:100px;">
Left header
</div>
</td>
<td>
right header
</td>
</tr>
<tr>
<td>
Menu
</td>
<td>
<!-- this DIV should scroll! -->
<div style="overflow:auto; width:100%;">
<table border="1" width="100%">
<tr>
<td>
SOME_LONG_COLUMN_VALUES_SOME_LONG_COLUMN_VALUES
</td>
<td>
SOME_LONG_COLUMN_VALUES_SOME_LONG_COLUMN_VALUES
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
Возможно, это можно сделатьс макетом, используя только теги DIV.Но из-за заданного макета главной страницы и asp: GridView я не могу это изменить.Также он все еще должен работать со старым IE6.
Может кто-нибудь помочь мне, пожалуйста?
Обновление
Может решить проблему самостоятельно.Если кому-то интересно, вот решение: добавил стиль CSS table-layout:fixed; в корневую таблицу.