Различные ширины TD в пределах такой же ширины TR

У меня есть таблица, которую я хочу изменить. В каждой строке есть две строки и два столбца. Итак, первая строка имеет две ячейки, в которых первая ячейка имеет 70% ширины, а вторая ячейка имеет 30% родительской таблицы. Вторая строка имеет две ячейки, где первая ячейка имеет 60% ширины, а вторая ячейка имеет 40% родительской таблицы. Хотя я явно указываю ширину, почему вторая строка поглощает характеристики первой строки?Различные ширины TD в пределах такой же ширины TR

Вот код. Почему это не работает так, как я хочу?

<!DOCTYPE html> 
<html> 
<body> 

<table style="border:1px black;width:100%"> 
    <tr> 
    <th>Month</th> 
    <th>Savings</th> 
    </tr> 
    <tr> 
    <td style="width:70%">January</td> 
    <td style="width:30%">$100</td> 
    </tr> 
    <td style="width:60%">feb</td> 
    <td style="width:40%">$100</td> 
    </tr> 
</table> 

</body> 
</html>

источник

2013-07-31 chaitanya.varanasi

Все ячейки в столбце всегда будут отображаться с одинаковой шириной –

Это просто, как работают ячейки таблицы. Столбцы в одной строке имеют одинаковую ширину. –

Вы должны просто разбить его на две таблицы. http://jsfiddle.net/6BCBy/ Хотя, я не могу придумать, почему вы хотите это сделать. – musicnothing

В первой колонке (<td width="70%">) вы установили ширина = 70%, а во второй строке первого столбца вы установили ширину столбца = 60%.

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

источник

2013-08-01 04:44:22

Различные ширины TD в пределах такой же ширины TR

ответ

Смежные вопросы