Question

好的，所以我设置了这个fiddle来证明我的问题。我有一张桌子，当我点击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');
    }
});

任何想法都赞赏。

Answer 1

只需在表格中使用table-layout: fixed;样式，它就会很棒！：）

Answer 2

这是因为<table>的默认布局是auto，它会调整自己的内容，当您隐藏该内容时，列将会调整为剩余的内容。

尝试为<th>元素设置宽度，它们应该坚持。

单击thead时停止文本移动

2 个答案: