Question

在两种情况下，我都有2个HTML表格，它们的代码完全相同。我在那里使用“ colspan”来区分表上的2列。主表宽度为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张桌子。不论相同的代码，两个表的第一列宽度都不同。

谢谢您的检查。

Answer 1

您在此独角兽测试结果中看到的页面出现许多错误： 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/

浮点数定义可能不是必需的，因为它是一个表，但是这样可以轻松地从表切换到列表。

Answer 2

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

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

带有colspan的HTML表格无法正常运行

2 个答案: