Фиксирование высоты ячейки и определение гибкости в таблице - PullRequest
Новая
       27

Фиксирование высоты ячейки и определение гибкости в таблице

0 голосов
/ 14 ноября 2009

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

Вот код HTML: 

    <table cellpadding="0" cellspacing="0" width="446" height="362">
    <!-- MSTableType="layout" -->
    <tr>
        <td valign="top" colspan="2" height="110">
        <p align="center">Banner</td>
    </tr>
    <tr>
        <td valign="top" height="95">I want this cell to have a fixed height</td>
        <td valign="top" rowspan="3" width="305">
        <p align="center">Text goes here - if the text is too long, I want the 
        stretching cell to vary in height, not the other 2.</td>
    </tr>
    <tr>
        <td valign="top" height="68">I want this cell to have a fixed height</td>
    </tr>
    <tr>
        <td height="89" width="141" valign="top">Stretching/Flexible cell - I 
        want this one to vary in height if the text on the right cell is too 
        long</td>
    </tr>
</table>

Как вы можете видеть, если я напишу текст, который больше высоты «Текстовой ячейки», все ячейки в правом столбце растянутся, и я хочу, чтобы только последняя сделала это. Вы можете мне помочь?

Ответы [ 5 ]

0 голосов
/ 14 ноября 2009

Спасибо за ответы, ребята. Последние несколько часов я пытался построить это с помощью div, но я никуда не уйду. У меня есть много строк и цветов, и я не могу поместить их в CSS. На самом деле дизайн гораздо сложнее, чем простая таблица, которую я разместил здесь: 

<table cellpadding="0" cellspacing="0" width="750" height="871">
        <!-- MSTableType="layout" -->
        <tr>
            <td valign="top">
            <p style="margin-top: 0; margin-bottom: 0">Banner</td>
            <td valign="top" rowspan="3">
            <p style="margin-top: 0; margin-bottom: 0">Banner</td>
            <td valign="top" rowspan="3" colspan="2">
            <p style="margin-top: 0; margin-bottom: 0">Banner</td>
            <td height="154"></td>
            </tr>
        <tr>
            <td valign="top">Banner</td>
            <td height="24"></td>
            </tr>
        <tr>
            <td valign="top" rowspan="3">Fixed Menu Cell</td>
            <td height="122"></td>
            </tr>
        <tr>
            <td valign="top" colspan="3">
            Banner</td>
            <td height="29"></td>
            </tr>
        <tr>
            <td valign="top" rowspan="6" colspan="2"><p>&nbsp;</p>
            <p>CONTAINER AREA, Text goes Here</p>
            </td>
            <td valign="top" rowspan="6">
            &nbsp;</td>
            <td height="102"></td>
            </tr>
        <tr>
            <td valign="top">
            Fixed Menu Cell</td>
            <td height="37"></td>
        </tr>
        <tr>
            <td valign="top">
            Fixed Menu Cell</td>
            <td height="44"></td>
        </tr>
        <tr>
            <td valign="top">
            Fixed Menu Cell</td>
            <td height="178"></td>
        </tr>
        <tr>
            <td valign="top">
            Fixed Menu Cell</td>
            <td height="109"></td>
        </tr>
        <tr>
            <td bgcolor="#FFFFFF">Flexible Cell - can vary depending on the 
            Container Area</td>
            <td height="33"></td>
        </tr>
        <tr>
            <td valign="top" colspan="4">
            <p align="center">Bottom</td>
            <td height="38"></td>
        </tr>
        <tr>
            <td width="252"></td>
            <td width="410"></td>
            <td width="56"></td>
            <td width="30"></td>
            <td height="1" width="2"></td>
        </tr>
    </table>

Я пытаюсь преобразовать этот беспорядок в DIV, но я не думаю, что собираюсь сделать это ^^ Кажется, такая простая проблема, но я не вижу простого решения ...

0 голосов
/ 14 ноября 2009

Я бы хотя бы попытался изучить CSS и использовать его для стилизации и определения размеров ваших таблиц вместо использования HTML. Есть много хороших учебных пособий, но, например: 

table {
   width: 600px;
}

table td {
   padding: 5px;
}

сделает ваш стол шириной 600px и даст каждые <td> 5px отступов. Назначьте любые ячейки или строки ids (уникально) и classes (применимо к группе) для более точного контроля.

0 голосов
/ 14 ноября 2009

Если вы попытаетесь сделать сайт со столами, тогда добро пожаловать в 21 век. Сервировка стола очень устарела. Попробуйте сайт, подобный http://www.pmob.co.uk/temp/3colfixedtest_4.htm. Там вы найдете веб-стандартную раскладку.

0 голосов
/ 14 ноября 2009

Как отмечалось выше, хотя это не совсем ответ на ваш вопрос, лучший способ сделать то, что вы хотите сделать, это научиться создавать макеты CSS с использованием тегов <DIV>. Это даст вам гораздо больший контроль над макетом страницы и, хотя требует некоторого изучения заранее, сэкономит вам огромное количество головной боли в будущем при использовании таблиц.

На самом деле, снова глядя на ваш пример. Основанный здесь макет будет очень простым. 

<div id='container'>
   <div class='banner'>Banner</div>
   <div class='fixed'>Fixed Height</div>
   <div class='dynamic'>Expanding div to fit text inside</div>
   <div class='fixed'>Fixed Height</div>
   <div class='dynamic'>Expanding div to fit text inside</div>   
</div>

Это даст вам ту же компоновку, что и таблица, с некоторыми стилями CSS.

РЕДАКТИРОВАТЬ: Последнее слово по этому вопросу. Лично для меня, если я знаю, что область будет областью типа сетки без особых требований к форматированию для различных областей, то вполне подойдет <table>, иначе я всегда буду использовать макет на основе CSS.

0 голосов
/ 14 ноября 2009

Сделайте высоту нижней левой ячейки "*" следующим образом: 

<table cellpadding="0" cellspacing="0" width="446" height="362">
    <!-- MSTableType="layout" -->
    <tr>
        <td valign="top" colspan="2" height="110">
        <p align="center">Banner</td>
    </tr>
    <tr>
        <td valign="top" height="95">I want this cell to have a fixed height</td>
        <td valign="top" rowspan="3" width="305">
        <p align="center">Text goes here - if the text is too long, I want the 
        stretching cell to vary in height, not the other 2.</td>
    </tr>
    <tr>
        <td valign="top" height="68">I want this cell to have a fixed height</td>
    </tr>
    <tr>
        <td height="*" width="141" valign="top">Stretching/Flexible cell - I 
        want this one to vary in height if the text on the right cell is too 
        long</td>
    </tr>
</table>

Это не позволит вам определить минимальную высоту ячейки, но это работает. Лучше всего было бы использовать CSS.

На самом деле, как я думаю, вы можете установить высоту вашего правого столбца на «257» (сумма ваших левых высот, и это будет означать, что ваш * будет по умолчанию равным 89, если правый столбец не растянется .

Я уверен, что это не кросс-браузерная совместимость, однако ... Да, просто отряхнул IE6, и он не ведет себя так, как следовало ожидать. Firefox прекрасно работает, хотя.

Это, вероятно, означает, что css будет вашим лучшим выбором.

...