HTML 表 Colspan答案

【问题标题】：HTML Table ColspanHTML 表 Colspan
【发布时间】：2018-03-08 20:47:38
【问题描述】：

我正在使用以下 HTML 代码制作日历：

<!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”显示在第一个单元格（周一早上），“Item2”显示从周一下午到周五。

但是，在查看输出时，“Item1”占据了整个周一，而“Item2”则从周二到周五显示。

有可能做我想做的事吗？

谢谢

【问题讨论】：

标签： html html-table

【解决方案1】：

我认为问题在于您实际上必须与colspan="1" 保持一致才能使您的跨度真正起作用。

如果您实际上是在日历中表示上午/下午，为什么不在“Mon Tue ... Fri”行下添加一行，如下所示：

 <!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>。

【讨论】：

感谢您的回复，这已经完成了工作。其他人向我提出了这个建议，但我希望避免，因为日历最终可能会扩展到一个月视图，并且上午/下午 31 点可能会有点混乱。再次感谢
嗯，您可以像大多数其他日历一样，为月视图提供单独的视图。另外，如果这回答了您的问题，您介意接受答案吗？

【解决方案2】：

试试这个：

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

【讨论】：

感谢您的快速回复。这样做会为 Mon 的第二个单元格放置一个空单元格，我希望 Mon 的第二个单元格成为“Item2”单元格的一部分。
对不起，我误解了你想要达到的目标。您所做的应该可以工作，但是浏览器中的表格呈现有时会产生不可预测的结果。尝试设置 COLWIDTH 属性以强制表格每列使用特定大小（例如 10%），看看是否有帮助...
没问题，我的问题可能有点不清楚。设置宽度似乎对表格的显示没有影响。 Frost 的回复似乎完成了这项工作。感谢您的帮助。