Question

我有<td>包含<a>标记，似乎重复出现的是最后几个字符（1~4）不会显示为超链接的一部分（未加下划线，不是可点击，但颜色为蓝色）。有没有CSS / JS修复此问题？它看起来像这样（c，e，s也是蓝色）。

下一个单元格重叠不属于超链接的部分，与此类似：

示例代码：

<table>
    <tr>
        <td><a href="#">First Link</a></td>
        <td>No Link</td>
    </tr>
</table>

Answer 1

您可能会在桌面上设置table-layout:fixed，并且宽度不足以容纳内容，请参阅以下演示以重现问题。

table {
    width: 30px; /*increase value*/
    table-layout: fixed; /*remove this*/
}

<table>
    <tr>
        <td><a href="#">Link Link</a></td>
        <td>Text Text</td>
    </tr>
</table>

要解决演示中的相关问题：

删除table-layout规则或增加width，或同时删除。{/ p>

其他事情可能会有所帮助：

删除white-space:nowrap;，如果它设置在相关位置。

根据需要设置word-break:break-all;，以强制使用长字。

Answer 2

您的代码没有问题，您能否显示此问题页面？所以我可以检查你的元素......

尝试将css重置为页面上的默认表格

table,
thead,
tbody,
tfoot,
tr,
th,
td {
    display: block;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: none;
    border-collapse: inherit;
    border-spacing: 0;
    border-color: inherit;
    vertical-align: inherit;
    text-align: left;
    font-weight: inherit;
    -webkit-border-horizontal-spacing: 0;
    -webkit-border-vertical-spacing: 0;
}
th, td {
    display: inline;
}

如何修复表格单元格中的重叠文本？

2 个答案: