two identical html tables display differently

问题

why do these tables display differently?

<table>
  <tbody>
    <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>

<br><br><br>


<table>
  <tbody>
    <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>

回答1:

As I surmised in my comment above, the space in <td style="width:20%;"> is a non-breaking space (U+00A0 : NO-BREAK SPACE [NBSP]) which can render as <tdstyle="width:20%;">. Just delete the sapce between td and style and enter a proper space and you're fine. Character identified via https://www.babelstone.co.uk/Unicode/whatisit.html

回答2:

The difference is here, in the screenshot. In the DOM structure, in this line there is a space, like $nbsp. Perhaps you copied this line from another editor. Use it:

<table>
  <tbody>
    <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>

<br><br><br>

<table>
  <tbody>
    <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>

来源：https://stackoverflow.com/questions/63344138/two-identical-html-tables-display-differently

标签

html

html-table