HTML таблица, как сделать все столбцы одинаковой высоты - PullRequest
2 голосов
/ 09 марта 2010

Я хочу отобразить 4 или 5 полей (варьируются), которые занимают 100% ширины страницы, поэтому она будет охватывать начало и конец страницы. и хотите, чтобы высота просто соответствовала содержанию.

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

Проблема с кодом ниже состоит в том, что все div в td центрированы и имеют разную высоту. попробовал все, что я могу придумать, но это не работает. пробовал вертикальное выравнивание, высота до 100% .....

Как мне получить все div в td с одинаковой высотой?

Также, если есть другой способ сделать это, пожалуйста, дайте мне знать. Я HTML пустышка, поэтому не могу использовать правильные вещи.

<table style="width: 100%; text-align:justify;">
    <tr>
        <td>
            <div style="margin-right:15px; background-color:Gray">
                 Some text here
            </div>
        </td>
        <td>
            <div style="margin-right: 15px; background-color:Gray">
                column 2 text here
            </div>
        </td>
        <td>
            <div style="margin-right: 15px; background-color:Gray">
                Column 3 text here
            </div>
        </td>
        <td>
            <div style="background-color:Gray">
                Last column text here
            </div>
        </td>
    </tr>
</table>

Ответы [ 4 ]

4 голосов
/ 09 марта 2010

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

Это даст тот же эффект, без делений:

<table style="width: 100%; text-align: justify;">
    <tr>
        <td style="margin-right: 15px; background-color: gray;">
            Some text here
        </td>
        <td style="margin-right: 15px; background-color: gray;">
            column 2 text here
        </td>
        <td style="margin-right: 15px; background-color: gray;">
            Column 3 text here
        </td>
        <td style="background-color: gray;">
            Last column text here
        </td>
    </tr>
</table>
0 голосов
/ 10 марта 2010

Маму, я бы посоветовал вам не использовать встроенные элементы стиля. Вместо стилизации ваших табличных тегов было бы гораздо эффективнее, и лучше добавить следующее между вашими <head> тегами:

<style type="text/css">
table    {width:100%; text-align:justify;}
table td {margin-right:15px; background-color:gray;}
</style>

Используя только эти две строки кода, вы можете последовательно применять одни и те же элементы ко всему сайту. Если вы хотите применить их только к некоторым элементам, вы можете создать классы, добавив «.» на ваше имя:

<style type="text/css">
.MyTable    {width:100%; text-align:justify;}
.MyTable td {margin-right:15px; background-color:gray;}
</style>

И добавьте в свой HTML-код следующее:

<table class="MyTable">

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

Кроме того, я призываю рассмотреть использование таблиц, только если вы представляете табличные данные. Таблицы загружаются медленнее и не оптимизированы для SEO. Семантически не правильно использовать их для разметки. Вы должны по возможности отделять контент от презентации, и если вам нужен макет, я бы предложил вместо этого использовать div и другие элементы.

0 голосов
/ 09 марта 2010

В случае, если нет особой цели использования тега div внутри td. Я бы просто сделал это без div. добавить стиль к тэгу.

0 голосов
/ 09 марта 2010

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...