Question

以下HTML代码在单独的行中显示Heading9和Heading10的值，而不是在Heading8之后立即显示（请参阅ActualOutput图像）

代码1：

<html><body bgcolor="#E6E6FA">
<TABLE cellpadding="5" style="border: 1px solid #000000; border-collapse: collapse;" border="2">
<TH>Heading1</TH>
<TH>Heading2</TH>
<TH>Heading3</TH>
<TH>Heading4</TH>
<TH>Heading5</TH>
<TH>Heading6</TH>
<TH>Heading7</TH>
<TH>Heading8</TH>
<TH>Heading9</TH>
<TH>Heading10</TH>
<TH colspan="20">Heading11</TH>
</TR>
<tbody>
<TR>
<TD rowspan="2">knnjkn</TD>
<TD>ceecev</TD>
<TD>lnlnlkn</TD>
<TD>lknlkn</TD>
<TD>lknkn</TD>
<TD>kjnkljnk</TD>
<TD>lknlkn</TD>
<TD>kjnlkn</TD>
<TD>kjbkn</TD>
</TR>
<TR>
<TD>jknklnk</TD>
<TD>kjnlknknm</TD>
<TD>jnkj n</TD>
<TD>lnnkkl</TD>
<TD>kjnknkj</TD>
<TD>sdwewcw</TD>
<TD>qwdcwcwc</TD>
<TD>csdcs</TD>
</TR>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
</tbody>
<tbody>
<TR>
<TD rowspan="2">ddccs</TD>
<TD>csdcs</TD>
<TD>csdcs</TD>
<TD>cswewc</TD>
<TD>csdcsdc</TD>
<TD>cdwdc</TD>
<TD>cdsc</TD>
<TD>zcxascsac</TD>
<TD>csdcdc</TD>
</TR>
<TR>
<TD>dadcc</TD>
<TD>csdc</TD>
<TD>cacsc</TD>
<TD>cdwcc</TD>
<TD>csdd</TD>
<TD>csdc</TD>
<TD>sdcsdc</TD>
<TD>cdscsd</TD>
</TR>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
</tbody>
</TABLE>
</html>

实际输出： ActualOutput

我可以通过将代码1更改为代码2来获得所需的输出，但是，我的bash脚本只在Heading8为每个正文框架后收集Heading9和Heading10数据，所以我不能在它们之间注入Heading9和10。

欣赏专家是否可以通过重组代码来提供更好的解决方案来获得预期的输出1.不幸的是，代码2在我的场景中不起作用。

代码2：

<html><body bgcolor="#E6E6FA">
<TABLE cellpadding="5" style="border: 1px solid #000000; border-collapse: collapse;" border="2">
<TH>Heading1</TH>
<TH>Heading2</TH>
<TH>Heading3</TH>
<TH>Heading4</TH>
<TH>Heading5</TH>
<TH>Heading6</TH>
<TH>Heading7</TH>
<TH>Heading8</TH>
<TH>Heading9</TH>
<TH>Heading10</TH>
<TH colspan="20">Heading11</TH>
</TR>
<tbody>
<TR>
<TD rowspan="2">knnjkn</TD>
<TD>ceecev</TD>
<TD>lnlnlkn</TD>
<TD>lknlkn</TD>
<TD>lknkn</TD>
<TD>kjnkljnk</TD>
<TD>lknlkn</TD>
<TD>kjnlkn</TD>
<TD>kjbkn</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
</TR>
<TR>
<TD>jknklnk</TD>
<TD>kjnlknknm</TD>
<TD>jnkj n</TD>
<TD>lnnkkl</TD>
<TD>kjnknkj</TD>
<TD>sdwewcw</TD>
<TD>qwdcwcwc</TD>
<TD>csdcs</TD>
</TR>
</tbody>
<tbody>
<TR>
<TD rowspan="2">ddccs</TD>
<TD>csdcs</TD>
<TD>csdcs</TD>
<TD>cswewc</TD>
<TD>csdcsdc</TD>
<TD>cdwdc</TD>
<TD>cdsc</TD>
<TD>zcxascsac</TD>
<TD>csdcdc</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
</TR>
<TR>
<TD>dadcc</TD>
<TD>csdc</TD>
<TD>cacsc</TD>
<TD>cdwcc</TD>
<TD>csdd</TD>
<TD>csdc</TD>
<TD>sdcsdc</TD>
<TD>cdscsd</TD>
</TR>
</tbody>
</TABLE>
</html>

预期产出： ExpectedOutput

Answer 1

添加以下可能有帮助...

  <style>
  table
  {
  border: 1px solid #000000; 
  border-collapse: collapse;
  display:table;
  position:relative;
  width:100%;

  }
  table tr
  {
    display: table-row;
    height: 35px;
    line-height: 30px;
    width: 100%;
  }
     table td
  {
      direction: ltr;
      display: table-cell;
      margin: 0;
      padding: 5px;
      table-layout: fixed;
  }
  </style>

HTML订单行和表

1 个答案: