Question

我在桌子上工作，其中一个要求是每一行在悬停时变为粗体。我有这个工作，但是当这种情况发生时，列的宽度会发生变化。

我有办法阻止这种情况吗？

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article>
            <div>
                <div>
                    ....
                    <a class="view-comments " title="" href="">View Comments</a>
                </div>
            </div>

            <section class="more-comments active">
                .......more-comments 1
            </section>
        </article>

        <article>
            <div>
                <div>
                    ....
                    <a class="view-comments" title="" href="">View Comments</a>
                </div>
            </div>

            <section class="more-comments">
                ....... more-comments 2
            </section>
        </article>


        <article>
            <div>
                <div>
                    ....
                    <a class="view-comments" title="" href="">View Comments</a>
                </div>
            </div>

            <section class="more-comments">
                ....... more-comments 3
            </section>
        </article>

        <article>
            <div>
                <div>
                    ....
                    <a class="view-comments" title="" href="">View Comments</a>
                </div>
            </div>

            <section class="more-comments">
                ....... more-comments 4
            </section>
        </article>

＆＃13;

 table {
    width: 100%;
    border: 1px solid #ccc;
    margin-top: 0;
    border-spacing: 5px;
    border-collapse: separate;
}

table tr:hover {
    font-weight: 600;
}

＆＃13;

具体来说，它会在悬停时将第二列的内容向右移动。向下滚动桌面时，最终看起来不太好。

Answer 1

关键是要提前为粗体文本预留空间。

换句话说，当行悬停时，文本变为粗体，从而产生更宽的表格单元格。但是如果每个表格单元格从一开始就在粗体文本中（即悬停之前），那么无论字体重量如何，宽度都将保持稳定。

在这个答案中，表格单元格的内容在title attribute中复制，然后用于使用::after伪元素创建内容的粗体但不可见的版本。

<强> HTML

<table>
    <tr>
        <td title="Cell One">Cell One</td>
        <td title="Cell Two">Cell Two</td>
    </tr>
</table>

<强> CSS

table {
    width: 100%;
    border: 1px solid #ccc;
    margin-top: 0;
    border-spacing: 5px;
    border-collapse: separate;
}

table tr:hover {
    font-weight: 600;
}

/* new */
td::after {     
    display: block;
    content:attr(title);
    font-weight: 600;
    color: transparent;
    height: 1px;
    margin-bottom: -1px;
    visibility: hidden;
    overflow: hidden;
}

DEMO：http://jsfiddle.net/69ku6rj4/

当内容在悬停时变得粗糙时防止表扩展

1 个答案: