浏览器在一个表格行的末尾添加了一个神秘的
[英]Browser adds a mysterious <td></td> at the end of one table row
问题描述
这是我的简化代码：
<head>
<style>
table { border-collapse: collapse; width: 100%;}
table td { padding-right: 15px; padding-left: 15 px; background-color: beige; border: none; }
table td:first-child { text-align: left; }
table tr td { vertical-align: middle; }
table#legendtable td { font-size: x-small; padding: none; text-align: center; width: 5%; border: 1px solid black; }
table#legendtable { table-layout: fixed; border-collapse: none; }
</style>
</head>
<body>
<table id="legendtable">
<tr>
<td><img src="pics/logos/desktop_windows.svg" class="icon" alt="Windows" /></td>
<td><img src="pics/logos/desktop_macos.svg" class="icon" alt="macOS" /></td>
<td><img src="pics/logos/desktop_linux.svg" class="icon" alt="Linux" /></td>
<td><img src="pics/logos/desktop_unix_freebsd.svg" class="icon" alt="FreeBSD" /></td>
<td><img src="pics/logos/desktop_unix_openbsd.svg" class="icon" alt="OpenBSD" /></td>
<td><img src="pics/logos/desktop_unix_netbsd.svg" class="icon" alt="NetBSD" /></td>
<td><img src="pics/logos/desktop_unix_dragonflybsd.svg" class="icon" alt="DragonFlyBSD" /></td>
<td><img src="pics/logos/desktop_unix_illumos.svg" class="icon" alt="Illumos" /></td>
<td><img src="pics/logos/desktop_haiku.png" class="icon" style="max-height: 24px;" alt="Haiku" /></td>
<td><img src="pics/logos/desktop_arcaos.png" style="max-height: 24px;" class="icon" alt="ArcaOS" /></td>
<td><img src="pics/logos/desktop_amigaos.jpg" class="icon" style="max-height: 24px;" alt="AmigaOS" /></td>
<td><img src="pics/logos/desktop_riscos.svg" class="icon" alt="RISC OS" /></td>
<td><img src="pics/logos/mobile_android.svg" class="icon" alt="Android" /></td>
<td><img src="pics/logos/mobile_ios.svg" class="icon" alt="iOS" /></td>
<td><img src="pics/logos/browser_firefox.svg" class="icon" alt="Firefox" /></td>
<td><img src="pics/logos/browser_safari.svg" class="icon" alt="Safari" /></td>
<td><img src="pics/logos/browser_chrome.svg" class="icon" alt="Chrome" /></td>
<td><img src="pics/logos/browser_edge.svg" class="icon" alt="Edge" /></td>
<td><img src="pics/logos/browser_opera.svg" class="icon" alt="Opera" /></td>
<td><img src="pics/logos/browser_brave.svg" class="icon" alt="Brave" /><td>
</tr>
<tr>
<td>Windows</td>
<td>macOS</td>
<td>Linux</td>
<td>Free<wbr>BSD</td>
<td>Open<wbr>BSD</td>
<td>Net<wbr>BSD</td>
<td>Dragon­Fly<wbr>BSD</td>
<td>Illumos</td>
<td>Haiku</td>
<td>ArcaOS</td>
<td>AmigaOS</td>
<td>RISC OS</td>
<td>Android</td>
<td>iOS</td>
<td>Firefox</td>
<td>Safari</td>
<td>Chrome</td>
<td>Edge</td>
<td>Opera</td>
<td>Brave</td>
</tr>
</table>
</body>
当您在浏览器中打开时，无论是 Chromium 还是 Firefox，第一行都会在包含“Brave”图像的单元格之后额外添加。 这个多出的cell在developer tools/inspect元素中可以看到，但是在源码中显然是不存在的。
只有第一行末尾的这个额外单元格来自哪里？ 我觉得这真的很愚蠢，我做错了，但我无法发现错误。
1 个解决方案
解决方案1
3 已采纳 2022-12-09 18:17:23
<td><img src="pics/logos/browser_brave.svg" class="icon" alt="Brave" /><td>
你犯了一个错误，没有正确关闭td标签。 下面是更正后的代码。
<head> <style> table { border-collapse: collapse; width: 100%;} table td { padding-right: 15px; padding-left: 15 px; background-color: beige; border: none; } table td:first-child { text-align: left; } table tr td { vertical-align: middle; } table#legendtable td { font-size: x-small; padding: none; text-align: center; width: 5%; border: 1px solid black; } table#legendtable { table-layout: fixed; border-collapse: none; } </style> </head> <body> <table id="legendtable"> <tr> <td><img src="pics/logos/desktop_windows.svg" class="icon" alt="Windows" /></td> <td><img src="pics/logos/desktop_macos.svg" class="icon" alt="macOS" /></td> <td><img src="pics/logos/desktop_linux.svg" class="icon" alt="Linux" /></td> <td><img src="pics/logos/desktop_unix_freebsd.svg" class="icon" alt="FreeBSD" /></td> <td><img src="pics/logos/desktop_unix_openbsd.svg" class="icon" alt="OpenBSD" /></td> <td><img src="pics/logos/desktop_unix.netbsd.svg" class="icon" alt="NetBSD" /></td> <td><img src="pics/logos/desktop_unix_dragonflybsd.svg" class="icon" alt="DragonFlyBSD" /></td> <td><img src="pics/logos/desktop_unix_illumos.svg" class="icon" alt="Illumos" /></td> <td><img src="pics/logos/desktop_haiku.png" class="icon" style="max-height: 24px;" alt="Haiku" /></td> <td><img src="pics/logos/desktop_arcaos.png" style="max-height: 24px;" class="icon" alt="ArcaOS" /></td> <td><img src="pics/logos/desktop_amigaos.jpg" class="icon" style="max-height: 24px;" alt="AmigaOS" /></td> <td><img src="pics/logos/desktop_riscos.svg" class="icon" alt="RISC OS" /></td> <td><img src="pics/logos/mobile_android.svg" class="icon" alt="Android" /></td> <td><img src="pics/logos/mobile_ios.svg" class="icon" alt="iOS" /></td> <td><img src="pics/logos/browser_firefox.svg" class="icon" alt="Firefox" /></td> <td><img src="pics/logos/browser_safari.svg" class="icon" alt="Safari" /></td> <td><img src="pics/logos/browser_chrome.svg" class="icon" alt="Chrome" /></td> <td><img src="pics/logos/browser_edge.svg" class="icon" alt="Edge" /></td> <td><img src="pics/logos/browser_opera.svg" class="icon" alt="Opera" /></td> <td><img src="pics/logos/browser_brave.svg" class="icon" alt="Brave" /></td> </tr> <tr> <td>Windows</td> <td>macOS</td> <td>Linux</td> <td>Free<wbr>BSD</td> <td>Open<wbr>BSD</td> <td>Net<wbr>BSD</td> <td>Dragon­Fly<wbr>BSD</td> <td>Illumos</td> <td>Haiku</td> <td>ArcaOS</td> <td>AmigaOS</td> <td>RISC OS</td> <td>Android</td> <td>iOS</td> <td>Firefox</td> <td>Safari</td> <td>Chrome</td> <td>Edge</td> <td>Opera</td> <td>Brave</td> </tr> </table> </body>
为什么 td 在表中添加额外的填充？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.