在不同的行中定义 <td>，宽度不起作用

Posted 2023-03-05

【中文标题】在不同的行中定义 <td>，宽度不起作用

【英文标题】：defined <td> in differnt rows, width not working

【发布时间】：2019-12-24 15:55:10

【问题描述】：

回到 1998 年！我正在制作带有表格的时事通讯模板！我的问题是我的td 没有采用定义的width，而是继承了它！

示例中的底部两行各有三列！在顶行中，我需要定义为42px 的侧列，而底行为83px。我无法弄清楚我做错了什么！谢谢！

<tr>
  <td>
    <table bgcolor="#c1d781"  align="center" border="1">
      <tr>
        <td colspan="3">
          <p mc:edit="element-title">„Lorem Lorem Lorem“</p>
        </td>
      </tr>
      <tr>
        <td  colspan="3"></td>
      </tr>
      <tr>
        <td >&nbsp;</td>
        <td align="center" >
          <p mc:edit="element-teaser">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sapien.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.
          </p>
        </td>
        <td >&nbsp;</td>
      </tr>
      <tr>
        <td  colspan="3"></td>
      </tr>
      <tr>
        <td >&nbsp;&nbsp;&nbsp;</td>
        <td align="center" >
          <p mc:edit="element-button"><a href="#">BUTTON</a>
          </p>
        </td>
        <td >&nbsp;&nbsp;&nbsp;</td>
      </tr>
      <tr>
        <td  colspan="3"></td>
      </tr>
    </table>
  </td>
</tr>

【问题讨论】：

您不能在单个表中的每行有不同的列宽。您可以嵌套表格 - 所以每一行都包含一个单元格，您可以在其中放置一个包含 1 行和 3 个单元格的嵌套表格。

【参考方案1】：

单个表不支持您尝试执行的操作（这是正确的）。表格就像一个网格——每行不能有不同的列宽。但是，您可以通过嵌套表来解决这个问题。

在此示例中，每行包含一个单元格，您可以在其中放置一个包含 1 行和 3 个单元格的嵌套表格：

<tr>
  <td>
    <table bgcolor="#c1d781"  align="center" border="1">
      <tr>
        <td>
          <p mc:edit="element-title">„Lorem Lorem Lorem“</p>
        </td>
      </tr>
      <tr>
        <td ></td>
      </tr>
      <tr>
        <td>
          <table border="1">
            <tr>
              <td >&nbsp;</td>
              <td align="center" >
                <p mc:edit="element-teaser">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sapien.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.
                </p>
              </td>
              <td >&nbsp;</td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td ></td>
      </tr>
      <tr>
        <td>
          <table border="1">
            <tr>
              <td >&nbsp;&nbsp;&nbsp;</td>
              <td align="center" >
                <p mc:edit="element-button"><a href="#">BUTTON</a>
                </p>
              </td>
              <td >&nbsp;&nbsp;&nbsp;</td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td ></td>
      </tr>
    </table>
  </td>
</tr>