设置 <td> 宽度摆脱表格显示？

Posted 2023-03-05

【中文标题】设置 <td> 宽度摆脱表格显示？

【英文标题】：Setting <td> width throwing off table display?

【发布时间】：2020-11-30 05:57:50

【问题描述】：

我完全不知道为什么在下表中设置 td 宽度属性会导致显示不正常。

 <table style="width:100%;">
        <tbody>
            <tr>
                <td colspan="4">
                    <big><big><b>Investments By Bruce Wayne</b></big></big>
                </td>
            </tr>
            <tr>
                <td style="width:20%;"><b><u>Date</u></b></td>
                <td style="width:20%;"><b><u>Invested</u></b></td>
                <td style="width:30%;"><b><u>Company (and Round)</u></b></td>
                <td style="width:30%;"><b><u>SPV</u></b></td>
            </tr>
        </tbody>
    </table>

上面的内容是在表格之外完全用“投资”一词呈现的 (see screenshot)。

对为什么会发生这种情况有任何想法吗？提前致谢！

【问题讨论】：

这能回答你的问题吗？ two identical html tables display differently

【参考方案1】：

<table style="width:100%;">
        <tbody>
            <tr>
                <td colspan="4">
                    <big><big><b>Investments By Bruce Wayne</b></big></big>
                </td>
            </tr>
            <tr>
        <td style="width:20%;"><b><u>Date</u></b></td>
                <td style="width:20%;"><b><u>Invested</u></b></td>
                <td style="width:30%;"><b><u>SPV</u></b></td>
                <td style="width:30%;"><b><u>Company (and Round)</u></b></td>
                
            </tr>
        </tbody>
    </table>

【参考方案2】：

问题： 您所要做的就是格式化您的代码。在 td 和样式 <td style（带有 Investment 文本的那个）之间有一个 NON-BREAKING-SPACE，它破坏了布局。要重现，您可以删除空格并再次添加空格。

注意： 您必须将 <big><big> 包裹起来 - 这可以减少到只有一个元素。

<table style="width:100%">
  <tbody>
    <tr>
      <td colspan="4">
        <big><b>Investments By Bruce Wayne</b></big>
      </td>
    </tr>
    <tr>
      <td style="width:20%;"><b><u>Date</u></b></td>
      <td style="width:20%;"><b><u>Invested</u></b></td>
      <td style="width:30%;"><b><u>Company (and Round)</u></b></td>
      <td style="width:30%;"><b><u>SPV</u></b></td>
    </tr>
  </tbody>
</table>