Ячейки таблицы воспринимают указание размеров только по вертикали.

ShadyAngel · №1

Ячейки таблицы воспринимают указание размеров только по вертикали. Ниже код примера. У меня во всех браузерах по высоте устанавливается высота яейки в 100 пиксел и появляется полоска прокрутки, а по ширине таблица упихмвается в див! Как этого избежать? Мне нужно точно указывать размеры ячеек.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style>
.scrollt td{width: 100px; height: 100px;}
</style>
</head>
<body>
<div style="width: 300px; height: 300px; background-color: #F00; overflow: scroll;">
<table class=scrollt border=1 cellspacing=0>
<tr><td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td></tr>
<tr><td>7</td> <td>8</td> <td>9</td> <td>10</td> <td>11</td> <td>12</td></tr>

Shutnik · №2

ShadyAngel

во первых

Выделить код

Код:

.scrollt td{width: 100px; height: 100px;}

меняем на

Выделить код

Код:

td.scrollt {width: 100px; height: 100px;}

а во вторых, разбирайтесь с размерами, что-то вы запутались похоже

ShadyAngel · №3

.scrollt td{width: 100px; height: 100px;} обозначает "все ячейки (элементы TD) внутри элемента класса scrollt имеют размер сто на сто". Максимум что здесь можно добавить это table.scrollt td{бла-бла}. То что предлагаете вы означает "все элементы TD класса scrollt имею размет сто на сто". В написанном мной примере нет элементов TD класса scrollt.

Суть проблемы такова: есть таблица с яцейками сто на сто, она прекрасно отображается, вот пример.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style>
.scrollt td{width: 100px; height: 100px;}
</style>
</head>
<body>
<table class=scrollt border=1 cellspacing=0>
<tr><td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td></tr>
<tr><td>7</td> <td>8</td> <td>9</td> <td>10</td> <td>11</td> <td>12</td></tr>

Если ее поместить в див с включенной прокруткой, то в высоту остается все по прежнему, а в ширину таблица сжимается до размеров дива.

И где же по вашему я запутался в размерах?

Shutnik · №4

понятно.
если добавить к каждому td-элименту первой строки атрибут nowrap, то всё будет именно так, как вы хотели.
как сделать это через css увы не знаю, MDC тоже

Lynn · №5

Способ отрисовки таблиц очень сложен по историческим причинам…
Попробуйте

Выделить код

Код:

table {table-layout:fixed}

Полезная информация

№130-07-2007 06:24:16