2012-01-22 3 views
2

творю календарь, используя следующий HTML-код:HTML Таблица Colspan

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head></head> 
<body> 
    <table border="1"> 
     <tr> 
      <td colspan="2">Mon</td> 
      <td colspan="2">Tue</td> 
      <td colspan="2">Wed</td> 
      <td colspan="2">Thu</td> 
      <td colspan="2">Fri</td> 
     </tr> 
     <tr> 
      <td colspan="1">Item1</td> 
      <td colspan="9">Item2</td> 
     </tr> 
    </table> 
</body> 

Каждый день имеет Colspan из 2, так что я могу показать, имеет ли элемент место только утром или на целый день и т. д.

В приведенном выше примере я хочу, чтобы «Item1» отображался в первой ячейке (Mon morning) и «Item2», чтобы показать с Mon днем ​​до Fri.

Однако при просмотре вывода «Item1» занимает весь Mon, а «Item2» отображается от Tue до Fri.

Можно ли сделать то, что я пытаюсь сделать?

Благодаря

ответ

1

Я думаю, что проблема в том, что вы на самом деле должны иметь ряд с colspan="1" для того, чтобы ваши пролеты на самом деле работает.

Если вы на самом деле представляющие AM/PM в календаре, почему бы не просто добавить строку под «пн вт ... пт» строка, например, так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
    <style> 
    td,th { min-width: 50px; } 
    </style> 
</head> 
<body> 
    <table border="1"> 
    <thead> 
     <tr> 
     <th colspan="2">Mon</th> 
     <th colspan="2">Tue</th> 
     <th colspan="2">Wed</th> 
     <th colspan="2">Thu</th> 
     <th colspan="2">Fri</th> 
     </tr> 
     <tr> 
     <th>AM</th> 
     <th>PM</th> 
     <th>AM</th> 
     <th>PM</th> 
     <th>AM</th> 
     <th>PM</th> 
     <th>AM</th> 
     <th>PM</th> 
     <th>AM</th> 
     <th>PM</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td colspan="1">Item1</td> 
     <td colspan="9">Item2</td> 
     </tr> 
    </tbody> 
    </table> 
</body> 
</html> 

Я также поставил заголовки в <thead> и фактические предметы в <tbody>, и сделаны заголовки <th> теги вместо <td>.

+0

Спасибо за ваш ответ. Это выполнило эту работу. Кто-то другой предложил мне это, но я надеялся избежать этого, так как календарь может в конечном итоге расширяться до месячного просмотра, а 31 AM/PM может немного запутаться. Еще раз спасибо – chester600

+0

Ну, у вас есть отдельный вид на месяц, как и большинство других календарей. Кроме того, если бы это ответили на ваш вопрос, не могли бы вы принять ответ? – Frost

0

Попробуйте это:

<td colspan="1">Item1</td> 
<td colspan="1">&nbsp;</td> 
<td colspan="8">Item2</td> 
+0

Благодарим за быстрый ответ. Это делает пустую ячейку для второй ячейки Mon, где я бы хотел, чтобы вторая ячейка Mon была частью ячейки Item2. – chester600

+0

Извините, я неправильно понял, чего вы пытались достичь. То, что вы делаете, должно работать, но рендеринг таблицы в браузерах может когда-нибудь иметь непредсказуемые результаты. Попробуйте установить свойства COLWIDTH, чтобы заставить таблицу использовать определенный размер (скажем, 10%) за столбец, посмотрите, помогает ли это ... – Sparky

+0

Нет проблем, я, вероятно, был немного неясен в моем вопросе. Настройка ширины, по-видимому, не влияет на отображение таблицы. Ответ Фроста, похоже, выполнил эту работу. Спасибо за вашу помощь. – chester600

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