Как определить ширину ячейки для 2 таблиц HTML с различным количеством столбцов? - PullRequest
Новая
       11

Как определить ширину ячейки для 2 таблиц HTML с различным количеством столбцов?

1 голос
/ 19 мая 2010

Если у меня есть 2 таблицы: 

<table id="Table1">
    <tr>
        <td></td><td></td><td></td>
    </tr>
</table>

<table id="Table2">
    <tr>
        <td></td><td></td><td></td><td></td>
    </tr>
</table>

У первого есть 3 столбца, у второго - 4 столбца.

Как я могу определить стиль для представления обеих таблиц, если я хочу, чтобы ширина ячейки Таблицы составляла 1/3 ширины полной таблицы, а ячейки Таблицы 2 составляли 1/4 ширины таблицы?

edit: Чтобы уточнить после комментария в одном из ответов ниже, который предлагает установить ширину таблицы на 100%, текст в некоторых столбцах будет превышать ширину естественного деления.

Ответы [ 5 ]

4 голосов
/ 19 мая 2010

Ответы до сих пор близки, но ни один не совсем прав: 

#Table1, #Table2 {
    width: 100%;
    table-layout: fixed;
}

и все.

table-layout: fixed предпочтительнее для всех таблиц, где ширина столбцов не должна зависеть от содержимого ячейки. Это быстрее и намного надежнее, чем стандартный auto алгоритм разметки таблицы.

Поскольку ни один из столбцов здесь не имеет явной ширины (либо из элемента <col>, либо из первой строки <td> s, все они разделяют оставшиеся 100% доступной ширины в равных долях между ними, сколько бы там ни было так что вам не нужно рассчитывать 25% s или 33% s.

0 голосов
/ 19 мая 2010 
<!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" >

    <style type="text/css">
        table 
        {
            table-layout: fixed;
            width: 100%;
        }
    </style>
0 голосов
/ 19 мая 2010

Использование CSS: 

#Table1 td{
    width: 33%;
}
#Table2 td{
    width: 25%;
}
0 голосов
/ 19 мая 2010

Этот CSS должен работать 

table td{
    width:100%;
}

table{
    table-layout:fixed;
}
0 голосов
/ 19 мая 2010

Попробуйте использовать следующий CSS: 

.table1 td {width:33%}
.table2 td {width:25%}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...