表列不相等

Question

我有下表。我使用colspan="4" 2 td - 但它们不相等。第一列大于第二列。这到底是什么原因？

＆＃13;

＆＃13;

<table border="0" cellpadding="0" cellspacing="0">         
            <tr><td colspan="8" style="height:10px;">&nbsp;</td></tr>
            <tr><td colspan="8" style="height:10px;">&nbsp;</td></tr>
   <tr>
                <td style="position: relative; font-size: 14px;" colspan="8">
               text
                </td>
   </tr>
  
   <tr><td colspan="8">&nbsp;</td></tr>
            <tr>
                <td colspan="4">
                    To:
                </td>
                <td colspan="4">
                    From:
                </td>
            </tr>
            <tr>
                <td colspan="4">
                   text<br>
                   text<br>
                   text<br>
                   text
                </td>
                <td colspan="4">
                   text<br>
                   text<br>
                   text<br>
                   text
                </td>
            </tr>
  //in the same way other rows
  </table>

＆＃13;

＆＃13;

＆＃13; 它看起来像这样：

Answer 1

不太清楚你的意思，但我已经给了它一个机会。我添加了colgroup来更清楚地描述差异，并替换了HTML5弃用的border="0" cellpadding="0" cellspacing="0"属性。

＆＃13;

＆＃13;

table {
  border: 0;
  border-spacing: 0;
  border-collapse: collapse;
  table-layout: fixed;
  width: 100px;  /*Needs to be greater than the size of 'From:'*/
}
td {
  padding: 0;
}

＆＃13;

<table>
  <colgroup>
    <col span="4" style="background-color:red">
    <col span="4" style="background-color:yellow">
  </colgroup>
  <tr>
    <td colspan="8" style="height:10px;">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="8" style="height:10px;">&nbsp;</td>
  </tr>
  <tr>
    <td style="position: relative; font-size: 14px;" colspan="8">
      text
    </td>
  </tr>

  <tr>
    <td colspan="8">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="4">
      To:
    </td>
    <td colspan="4">
      From:
    </td>
  </tr>
  <tr>
    <td colspan="4">
      text
      <br>text
      <br>text
      <br>text
    </td>
    <td colspan="4">
      text
      <br>text
      <br>text
      <br>text
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

虽然查看您的图片，但以下结构更合适：

＆＃13;

＆＃13;

table {
  border: 0;
  border-spacing: 0;
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  /*Needs to be greater than the size of 'From:'*/
}
td {
  padding: 0;
}
caption {
  color: #002B7F;
  font-weight: bold;
}
caption,
th {
  text-align: left;
}
thead {
  background-color: #007C66;
  color: white;
}

＆＃13;

<table>
  <caption>text</caption>
  <thead>
    <th>To:</th>
    <th>From:</th>
  </thead>
  <tr>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;