HTML:无法对齐表格单元格

时间:2016-09-08 07:05:41

标签: html css

我生成有关TFS构建的自动电子邮件。我需要创建一个表,因此我创建HTML表以将其分配给对象System.Net.Mail.MailMessage的实例Body属性:

 msg.Body = message + table;

我的C#代码工作正常,但我不能调整我的HTML表格。这是生成的HTML的一部分:

<table border="1" style="border: 1px solid; ">
  <tr>
    <td rowspan="5">
        <b>Requirement #1172660: </b>
        <br/>Malicious apps weren't recognized on desktop (webroot did not respond) <br/>
      </td>
  </tr>
  <tr>
    <td valign="top">
        <b>Changeset #444273:</b>
        <br/>By John Smith: increase webroot external service timeout 11/05/2016 10:38:59<br/>
      </td>
  </tr>
  <tr>
    <td valign="top">
        <b>Changeset #455754:</b>
        <br/>By John Smith: Added retry mechanism to external service call 12/07/2016 18:19:23<br/>
      </td>
  </tr>
  <tr>
    <td valign="top">
        <b>Changeset #455969:</b>
        <br/>By John Smith: Increased webroot timeout to 30 sec 13/07/2016 15:10:42<br/>
      </td>
  </tr>
  <tr>
    <td valign="top">
        <b>Changeset #458813:</b>
        <br/>By John Smith: Fixed bug in soapfull request retry 28/07/2016 12:16:16<br/>
      </td>
  </tr>
  <tr>
    <td rowspan="5">
        <b>Requirement #1172660: </b>
        <br/>Malicious apps weren't recognized on desktop (webroot did not respond) <br/>
      </td>
  </tr>
  <tr>
    <td valign="top">
        <b>Changeset #444273:</b>
        <br/>By John Smith: increase webroot external service timeout 11/05/2016 10:38:59<br/>
      </td>
  </tr>
  <tr>
    <td valign="top">
      <b>Changeset #455754:</b>
      <br/>By John Smith: Added retry mechanism to external service call 12/07/2016 18:19:23<br/>
    </td>
  </tr>
  <tr>
    <td valign="top">
      <b>Changeset #455969:</b>
      <br/>By John Smith: Increased webroot timeout to 30 sec 13/07/2016 15:10:42<br/>
    </td>
  </tr>
  <tr>
    <td valign="top">
      <b>Changeset #458813:</b>
      <br/>By John Smith: Fixed bug in soapfull request retry 28/07/2016 12:16:16<br/>
    </td>
  </tr>
  <tr>
    <td rowspan="2">
      <b>Requirement #1180032: </b>
      <br/>Orange FR - Change text before Factory Reset / Flash <br/>
    </td>
  </tr>
  <tr>
    <td valign="top">
      <b>Changeset #455265:</b>
      <br/>By John Smith:  11/07/2016 10:33:46<br/></td>
    </tr>
</table>

当我将此代码传递给某些HTML编译器http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_table_span时 我得到了令人满意的结果: enter image description here 虽然如您所见,右侧单元格与底部略微对齐。 Nervertheles,当我收到我的电子邮件时,我的头痛开始了。生成的表看起来不同: enter image description here

如您所见,电子邮件中生成的表格在右侧单元格的顶部有相当大的空白区域。 在我的生活中,我从未处理过HTML,我也不知道如何消除这种差距,将其与顶部对齐,或者像HTML一样保持表格的外观和感觉(外观和感觉)在第一个截图)。 我很乐意提供任何帮助或建议。

1 个答案:

答案 0 :(得分:1)

我找到了解决方案:我需要更改我的表结构:

现在我用它:

<table>
    <tr>
        <td rowspan="1">Bug 1</td >
        <td>Changeset 1</td >
    </tr>
    <tr>
        <td rowspan="2">Bug 1</td >
        <td>Changeset 1</td >
    </tr>
    <tr>
        <td >Changeset 2</td >           
    </tr>

    <tr>
        <td rowspan="3">Bug 2</td >
        <td >Changeset 1</td >
    </tr>
    <tr>
        <td >Changeset 2</td >           
    </tr>
     <tr>
        <td >Changeset 3</td >           
    </tr>
   <tr>
        <td rowspan="4">Bug 2</td >
        <td >Changeset 1</td >
    </tr>
    <tr>
        <td >Changeset 2</td >           
    </tr>
     <tr>
        <td >Changeset 3</td >           
    </tr>
     <tr>
        <td >Changeset 3</td >           
    </tr>

而不是:

<table>
        <tr>
          <td rowspan="3">Bug 1</td>           
        </tr>
        <tr>
            <td>Changeset 1</td>           
        </tr>
        <tr>
            <td>Changeset 2</td>           
        </tr>



        <tr>
            <th rowspan="5">Bug 2</th>           
        </tr>
        <tr>
            <th>Changeset 1</th>           
        </tr>
        <tr>
            <th>Changeset 2</th>           
        </tr>
         <tr>
            <th>Changeset 3</th>           
        </tr>
         <tr>
            <th>Changeset 4</th>           
        </tr>
</table>