Проблема с несколькими столбцами HTML

У меня есть один вопрос относительно таблиц HTML, которые мне не удалось найти.Проблема с несколькими столбцами HTML

Возможно ли создать этот макет с использованием HTML и встроенного css в одной таблице?

enter image description here

Я попытался объединить свои клетки в 4-м ряду (я начал с 3 макета столбца), потому что мне нужно 2 клетки, и если моя ширина таблицы 640px, и я заставляю 320px для обеих клеток, вся таблица перепуталась.

EDIT: 4-я строка - проблема, мне нужно 2 ячейки с равной шириной.

Заранее спасибо.

источник

2014-10-22 Kosta021

У меня есть колспан на 3-й строке, 4-я строка - моя проблема. Я не могу получить в нем 2 ячейки с одинаковой шириной. – Kosta021

вы можете сделать нас jsfiddle? – vaso123

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

Все ячейки в одном столбце должны быть такой же ширины, так что вам нужен дополнительный столбец:

Первый ряд: один сотовый Colspan = 4
второй ряд: одна клетка, на мобильный Colspan = 2, одна ячейка
Третий ряд: одна клетка = 4 Объединение столбцов
Четвертый ряд: одна ячейка = 2 Объединение колонок, одна ячейка COLSPAN = 2

ширина для каждого гр olumn выглядеть примерно так:

Колонка 1 узок, скажем, ширина = 50px
Колонка 2 320 - ширина COLUMN1, в 280px
Колонка 3 так же, как 2, 280px
Колонка 4 же как 1, например 50px

источник

2014-10-22 12:23:47 Victor

Спасибо, я выберу это как правильный ответ, потому что вы сначала ответили на мой вопрос. – Kosta021

<table border=1> 
    <tr> 
    <td colspan="4">Cell</td> 
    </tr> 
    <tr> 
    <td>Cell</td> 
    <td colspan="2">Cell</td> 
    <td>Cell</td> 
    </tr> 
    <tr> 
    <td colspan="4">Cell</td> 
    </tr> 
    <tr> 
    <td colspan="2">Cell</td> 
    <td colspan="2">Cell</td> 
    </tr> 
</table>

источник

2014-10-22 12:25:47

Спасибо тонну. Он работает так, как мне нужно! – Kosta021

<table border="1"> 
     <tr> 
      <td colspan="4">cell</td> 
     </tr> 
     <tr> 
      <td>cell</td> 
      <td colspan="2">cell</td> 
      <td>cell</td> 
     </tr> 
     <tr> 
      <td colspan="4">cell</td> 
     </tr> 
     <tr> 
      <td colspan="2">cell</td> 
      <td colspan="2">cell</td> 
     </tr> 
    </table>

источник

2014-10-22 12:29:30 yuriy

<table border="1" width="100%"> 
    <tr> 
    <td colspan="4">Cell</td> 
    </tr> 
    <tr> 
    <td width="10%">Cell</td> 
    <td colspan="2">Cell</td> 
    <td width="10%">Cell</td> 
    </tr> 
    <tr> 
    <td colspan="4">Cell</td> 
    </tr> 
    <tr> 
    <td colspan="2" width="50%">Cell</td> 
    <td colspan="2" width="50%">Cell</td> 
</tr>

Проверьте DEMO

источник

2014-10-22 12:31:31 deepakb

Использование подобного. он работает

<!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"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Untitled Document</title> 
    <style> 
    td{ 
     text-align:center; 
    } 
    </style> 
    </head> 

    <body> 
    <table width="640" cellspacing="5"> 
     <tr> 
     <td colspan="4">Cell</td> 
     </tr> 
     <tr> 
     <td>Cell</td> 
     <td colspan="2">Cell</td> 
     <td>Cell</td> 
     </tr> 
     <tr> 
     <td colspan="4">Cell</td> 
     </tr> 
     <tr> 
     <td colspan="2">Cell</td> 
     <td colspan="2">Cell</td> 
     </tr> 
    </table> 

    </body> 
    </html>

источник

2014-10-22 12:33:54

Проблема с несколькими столбцами HTML

ответ

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