Таблица colspan выглядит по-другому

У меня есть таблица из 2 рядов и 3 колонки, и я хочу установить colspan=2 на 1x2 cell и 2x1 cell. Но результат кажется чем-то другим, чем я ожидал.Таблица colspan выглядит по-другому

Ожидаемый один: enter image description here

Но выход, который показал: enter image description here

Вот это HTML:

<!DOCTYPE HTML PUBLIC> 
<html> 
<body> 
    <table border=1 cellpadding=0 cellspacing=0 width=100%> 
    <tr> 
     <td >1x1</td> 
     <td COLSPAN=2>1x2</td> 
    </tr> 
    <tr> 
     <td COLSPAN=2>2X1</td> 
     <td>2x2</td> 
    </tr> 
    </table> 
</body> 
</html>

Может кто-нибудь помочь мне достичь ожидаемый положить с помощью таблицы и colspan?

источник

2014-09-18 Rama Rao M

Добавьте следующий класс CSS:

table { 
    table-layout: fixed; 
}

FIDDLE

источник

2014-09-18 12:55:25 Danield

Удивительный! Это работает. Но что это значит? BTW спасибо. –

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

Установка table-layout: fixed, как и в ответе @ Danield, решает проблему путем принуждения fixed table layout. Алгоритм для этого делит доступное пространство равномерно на столбцы, когда требование ширины не выражено в CSS или HTML. Если даже разделение - это то, что вы хотите (хотя ваш «Ожидаемый» несколько отличается), это самый простой способ.

Другой способ - установить ширину явно, например. в этом случае (см jsfiddle)

td { 
    width: 33.33%; 
} 
td[colspan=2] { 
    width: 66.67%; 
}

Это излишне неуклюжим, если вы просто хотите, даже деление. Но если вы хотите, например, ширина столбцов, чтобы быть 25%, 50%, 25%, вы можете использовать следующие (см other jsfiddle):

<style> 
col { 
    width: 25%; 
} 
col:nth-of-type(2) { 
    width: 50%; 
} 
</style>

... ...

В подобных случаях, это проще установить ширину для столбцов напрямую (путем стилизации элементов col), а не косвенно, задав ширины для ячеек (которые могут занимать несколько столбцов).

источник

2014-09-18 13:56:28

Таблица colspan выглядит по-другому

ответ

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