HTML订单行和表格

Question

The following HTML code displays the value of Heading9 and Heading10 in a separate row instead of displaying right after Heading8 (see ActualOutput image) 以下HTML代码在单独的行中显示Heading9和Heading10的值，而不是在Heading8之后立即显示（请参阅ActualOutput图像）

Code 1: 代码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>

Actual Output: 实际产量： ActualOutput

I can get the desired output by changing the code 1 to code 2, however, my bash script gathers Heading9 and Heading10 data only after Heading8 is framed for each body, so I cannot inject Heading9 and 10 in between. 我可以通过将代码1更改为代码2来获得所需的输出，但是，我的bash脚本仅在Heading8为每个主体构成框架之后收集Heading9和Heading10数据，因此我无法在其间注入Heading9和10。

Appreciate if experts can provide a better solution to get the expected output by restructuring the code 1. Unfortunately, code 2 doesn't work in my scenario. 感谢专家是否可以通过重构代码1提供更好的解决方案来获得预期的输出。不幸的是，代码2在我的场景中不起作用。

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

Expected Output: 预期产量： ExpectedOutput

Answer 1

Add Following may this help... 添加关注可能有帮助...

  <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 个解决方案

解决方案1
0 2015-02-12 07:26:23

HTML订单行和表格

问题描述

1 个解决方案

解决方案1 0 2015-02-12 07:26:23

解决方案1
0 2015-02-12 07:26:23