单击thead时停止移动文本

debugcn 发表于 Dev

用户名

好的，所以我设置了这个小提琴来演示我的问题。我有一张桌子，当我单击thead时，单击时行会隐藏和取消隐藏，效果很好。我看到的问题是单击标题时文本“移动”。我不明白这个的原因，似乎无法弄清楚如何解决。

<table id="table-results" class="table table-hover table-condensed table-results">
    <thead>
        <tr class="header">
            <th colspan="2">LATEST RESULTS</th>
            <th colspan="1"><span><i id="chevron" class="fa fa-chevron-right"></i></span>

            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Date</td>
            <td>Home Team</td>
            <td>Score</td>
        </tr>
        <tr>
            <td>Date</td>
            <td>Home Team</td>
            <td>Score</td>
        </tr>
        <tr>
            <td>Date</td>
            <td>Home Team</td>
            <td>Score</td>
        </tr>
    </tbody>
</table>

JS在这里：

$('.header').click(function () {
    $(this).closest('table').children('tbody').toggle();
    if ($('#chevron').hasClass("fa-chevron-left")) {
        $('#chevron').toggleClass('fa-chevron-left fa-chevron-down');
    } else {
        $('#chevron').toggleClass('fa-chevron-down fa-chevron-left');
    }
});

任何想法表示赞赏。

Pulkit米塔尔

只需table-layout: fixed;在表格中使用样式，它就可以很好地工作！:)

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。