带有 colspan 的 HTML 表无法正常工作答案

【问题标题】：HTML Table with colspan not working correctly带有 colspan 的 HTML 表无法正常工作
【发布时间】：2019-10-30 17:09:15
【问题描述】：

我有 2 个 HTML 表格，在这两种情况下都有完全相同的代码。我在那里使用“colspan”来区分桌子上的两列。主表宽度为 colspan 65，列分别为 colspan 5 和 60。但在 2 个表格中，列的宽度显示不同。

我已经测试了所有代码。两个表都有相同的代码，我使用了 table-cell 属性，但它仍然无法正常工作。也没有指定任何列的宽度。

这是我的两个表的语法：

<table class="agenda-table" style="width: 100%;">
  <tbody>
    <tr class="agheader">
      <th colspan="65">Title</th>
    </tr>
    <tr>
      <td colspan="5">xxx</td>
      <td colspan="60">
        <h4>yyy</h4>
      </td>
    </tr>
    <tr>
      <td colspan="5">aaa</td>
      <td colspan="60">
        <h4>bbb</h4>
      </td>
    </tr>
    ....
  </tbody>
</table>

您可以查看直播page here。

您可以看到那里有 2 张桌子。两个表的第一列的宽度不同，与代码相同。

感谢您的检查。

【问题讨论】：

我没有发现问题。标题行是一列（表格的整个宽度），随后的每一行有两列（5 和 60）。
感谢您的回复@symlink 您可以在此处查看屏幕截图：prnt.sc/o2s28i 检查时间线栏（红色垂直线与它们之间的o）在两个表格中不在同一行。该栏位于第一列之后。我需要在同一行中的这 2 条。

标签： html html-table

【解决方案1】：

在每个表格的第一行中使用相等的百分比宽度。

<table class="agenda-table" style="width: 100%;">
  <tbody>
    <tr class="agheader">
      <th style="width: 35%">xxx</th>
      <th>Title 1</th>
    </tr>
    <tr>
      <td>xxx</td>
      <td>
        <h4>yyy</h4>
      </td>
    </tr>
    <tr>
      <td>aaa</td>
      <td>
        <h4>bbb</h4>
      </td>
    </tr>
  </tbody>
</table>

<table class="agenda-table" style="width: 100%;">
  <tbody>
    <tr class="agheader">
      <th style="width: 35%">xxx</th>
      <th>Title 2</th>
    </tr>
    <tr>
      <td>xxx</td>
      <td>
        <h4>yyy</h4>
      </td>
    </tr>
    <tr>
      <td>aaa</td>
      <td>
        <h4>bbb</h4>
      </td>
    </tr>
  </tbody>
</table>

【讨论】：

【解决方案2】：

您的页面存在许多错误，您可以在此独角兽测试结果中看到： https://validator.w3.org/unicorn/check?ucn_task=conformance&ucn_uri=https%3A%2F%2Fwww.learnx.net%2Flearnx-agenda%2F&ucn_lang=en

有很多解析错误，未闭合的标签可能会导致错误像这样。

如果您使用 css 类来设置表格样式，为什么还要使用内联代码？

在您的页面 css 中，我找到了这个定义：

.agenda-table {
max-width: 96%;
margin: 100px auto 0;
}

那为什么还要用内联代码定义witdh呢？

style="width: 100%;"

我已经从您的问题中获取了您的代码并替换了带有类的内联代码并添加了一些 css。

css 示例：

* {
  margin :0;
  padding :0;
  }
 .agenda-table {
  margin : 0 auto;
  width : 100%
   }
  .agheader {
   float : left;
   width : 65%;
   background : #f442bc;
   }
   th, tr {
   float : left;
   width : 100%;
   text-align : left;
   }
   .left {
    float : left;
    width : 5%;
   border-right : 1px solid #f442bc;
   }
   .right {
   float : left;
   width : 60%;
   }

示例 html：

<!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
 <head>
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
 </head>
 <body>
 <table class="agenda-table">
  <tbody>
   <tr class="agheader">
    <th>Title</th>
   </tr>
  <tr>
   <td class="left">xxx</td>
   <td class="right">
    <h4>yyy</h4>
   </td>
  </tr>
  <tr>
   <td class="left">aaa</td>
   <td class="right">
    <h4>bbb</h4>
   </td>
  </tr>
 </tbody>
</table>

<table class="agenda-table">
 <tbody>
 <tr class="agheader">
   <th>Title</th>
 </tr>
 <tr>
  <td class="left">xxx</td>
  <td class="right">
    <h4>yyy</h4>
  </td>
</tr>
<tr>
  <td class="left">aaa</td>
  <td class="right">
    <h4>bbb</h4>
  </td>
 </tr>
</tbody>
</table>


</body>
</html>

这是一个显示此示例有效的小提琴：https://jsfiddle.net/Thorske/bL5ktrga/11/

浮点定义可能不是必需的，因为它是一个表格，但是这将允许从表格轻松切换到列表。

【讨论】：