html table colspan не работает как ожидалось

Question

HTML-концепции так ужасны иногда.

Это мой код, использующий colspan в таблице html, и не выглядит так, как я ожидаю.

<table border="1"> 
    <tr> 
     <td colspan="3">a</td> 
    </tr> 
    <tr> 
     <td colspan="2">b</td> 
     <td>c</td> 
    </tr> 
</table> 

То, что я хочу это: ячейка «а» должен выглядеть 3 клетки шириной, клетка «б» должен выглядеть 2 клетки шириной, ячейка «с» должен выглядеть 1 cell широкий.

Что она делает это: ячейка 'а' является 2 клетки шириной, ячейка 'B' & 'с' широкий 1 клетка.

Любые предложения спасибо.

Answer 1

Атрибут colspan определяет, сколько столбцов ячейка перекрывается относительно других ячеек, а не абсолютный размер этих столбцов. В вашем случае span 2 имеет два пролета. как вы можете сказать, что это не так? не судите об этом по ширине ячейки. span - это не ширина. Вам нужно добавить еще меньшие столбцы в . это как столбец двух пролетов.

См. Решение для вашего ожидания в последнем примере фрагмента кода.

<h3>Example 1</h3> 
 

 
<table border="1"> 
 
    <tr><td>col1</td><td>col2</td><td>col3</td></tr> 
 
    <tr><td colspan="3">a</td></tr> 
 
    <tr><td colspan="2">b</td><td colspan="1">c</td></tr> 
 
</table> 
 

 
<h3>Example 2</h3> 
 

 
<table border="1"> 
 
    <tr><td width="80px">wide col1</td><td>col2</td><td>col3</td></tr> 
 
    <tr><td colspan="3">span 3</td></tr> 
 
    <tr><td colspan="2">span 2</td><td colspan="1">span 1</td></tr> 
 
</table> 
 

 
<h3>Your case</h3> 
 

 
<table border="1"> 
 
    <tr><td colspan="3">span 3</td></tr> 
 
    <tr><td colspan="2" width="66%">span 2</td><td width="33%">span 1</td></tr> 
 
</table>

Answer 2

<table border="1"> 
 
    <tr> 
 
     <td colspan="3" width="200px">a</td> 
 
    </tr> 
 
    <tr> 
 
     <td colspan="2" width="100px">b</td> 
 
     <td width="100px">c</td> 
 
    </tr> 
 
</table>