文章/答案/技术大牛

发布

社区首页 >问答首页 >隐藏/显示表行时的引导表对齐问题

问隐藏/显示表行时的引导表对齐问题
EN

Stack Overflow用户

提问于 2020-04-15 11:52:40

回答 2查看 109关注 0票数 0

下面是一个完整的HTML，我有，但它有一个问题。我有一个带有标题和四个数据行的表。加载时显示前两个数据行。表格下方有导航按钮，允许用户在第一页(显示前两个数据行)和第二页(显示最后两个数据行)之间切换。加载页面后，表看起来没有问题。但是，当单击任何导航按钮时，表格就会变得一团糟。首先，表格第一行上的"Report“标题和"Page: x/ 2”的对齐是错误的。其次，缩短了每个数据行的行宽。感谢您的帮助。提前谢谢。

$('.page-item').on('click', function() {
    var currentPage = $(this).val();
    $('#page').text('Page: ' + currentPage + ' / 2');
    if (currentPage == 1) {
        $('#message-0').css('display', 'block');
        $('#message-1').css('display', 'block');
        $('#message-2').css('display', 'none');
        $('#message-3').css('display', 'none');
    } else {
        $('#message-0').css('display', 'none');
        $('#message-1').css('display', 'none');
        $('#message-2').css('display', 'block');
        $('#message-3').css('display', 'block');
    }
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="container-fluid" style="padding-top: 70px;">
    <table class="table small">
        <thead class="thead-dark">
            <tr>
                <th scope="col" class="border-0">Report ID: XXXXXX</th>
                <th scope="col" class="border-0" style="text-align: center">Report</th>
                <th scope="col" id="page" class="border-0" style="text-align: right">Page: 1 / 2</th>
            </tr>
            <tr>
                <th scope="col" colspan="1" class="border-0">Report Date: 15/04/2020</th>
                <th scope="col" colspan="2" class="border-0" style="text-align: right">Updated Time: 15/04/2020 11:03:46
                </th>
            </tr>
        </thead>
        <tbody>
            <tr class="table-success" id="message-0" style="">
                <td colspan="3" nowrap>11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
                    <br/>11111111111111111111
                    <br/>111111111
                    <br/>1111111111111111111
                    <br/>1111111111111
                    <br/>111111111111111111
                    <br/>11111111111111111111111111111111
                    <br/>111111111111111111111111111111111111
                    <br/>11111111111111111111111111111111111
                    <br/>11111111111111111111111111111111111
                    <br/>11111111111111
                    <br/>11111111111
                    <br/>11111111
                    <br/>1111111111
                    <br/>111</td>
            </tr>
            <tr class="table-success" id="message-1" style="">
                <td colspan="3" nowrap>22222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222
                    <br/>22222222222222222222
                    <br/>222222222
                    <br/>2222222222222222222
                    <br/>2222222222222
                    <br/>222222222222222222
                    <br/>22222222222222222222222222222222
                    <br/>222222222222222222222222222222222222
                    <br/>22222222222222222222222222222222222
                    <br/>22222222222222222222222222222222222
                    <br/>22222222222222
                    <br/>22222222222
                    <br/>22222222
                    <br/>2222222222
                    <br/>222</td>
            </tr>
            <tr class="table-success" id="message-2" style="display:none">
                <td colspan="3" nowrap>33333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333
                    <br/>33333333333333333333
                    <br/>333333333
                    <br/>3333333333333333333
                    <br/>3333333333333
                    <br/>333333333333333333
                    <br/>33333333333333333333333333333333
                    <br/>333333333333333333333333333333333333
                    <br/>33333333333333333333333333333333333
                    <br/>33333333333333333333333333333333333
                    <br/>33333333333333
                    <br/>33333333333
                    <br/>33333333
                    <br/>3333333333
                    <br/>333</td>
            </tr>
            <tr class="table-success" id="message-3" style="display:none">
                <td colspan="3" nowrap>44444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444
                    <br/>44444444444444444444
                    <br/>444444444
                    <br/>4444444444444444444
                    <br/>4444444444444
                    <br/>444444444444444444
                    <br/>44444444444444444444444444444414
                    <br/>444444444444444444444444444444444444
                    <br/>44444444444444444444444444444444444
                    <br/>44444444444444444444444444444444444
                    <br/>44444444444444
                    <br/>44444444444
                    <br/>44444444
                    <br/>4444444444
                    <br/>444</td>
            </tr>
        </tbody>
    </table>
    <nav aria-label="Pagination">
        <ul class="pagination justify-content-center font-weight-medium">
            <li id="button-previous-page" class="page-item" value="1" style="cursor: pointer"><a class="page-link svg-icon" aria-label="Previous Page" title="Previous Page" rel="tooltip"><span
        aria-hidden="true" data-feather="chevrons-left">&lt;</span></a></li>
            <li id="button-next-page" class="page-item" value="2" style="cursor: pointer"><a class="page-link svg-icon" aria-label="Next Page" title="Next Page" rel="tooltip"><span aria-hidden="true" data-feather="chevrons-right">&gt;</span></a></li>
        </ul>
    </nav>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

bootstrap-4

jquery

html

css

twitter-bootstrap

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-04-16 00:13:38

不要在表中使用display: block，而应使用display: table-row。

$('.page-item').on('click', function() {
    var currentPage = $(this).val();
    $('#page').text('Page: ' + currentPage + ' / 2');
    if (currentPage == 1) {
        $('#message-0').css('display', 'table-row');
        $('#message-1').css('display', 'table-row');
        $('#message-2').css('display', 'none');
        $('#message-3').css('display', 'none');
    } else {
        $('#message-0').css('display', 'none');
        $('#message-1').css('display', 'none');
        $('#message-2').css('display', 'table-row');
        $('#message-3').css('display', 'table-row');
    }
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="container-fluid" style="padding-top: 70px;">
    <table class="table small">
        <thead class="thead-dark">
            <tr>
                <th scope="col" class="border-0">Report ID: XXXXXX</th>
                <th scope="col" class="border-0" style="text-align: center">Report</th>
                <th scope="col" id="page" class="border-0" style="text-align: right">Page: 1 / 2</th>
            </tr>
            <tr>
                <th scope="col" colspan="1" class="border-0">Report Date: 15/04/2020</th>
                <th scope="col" colspan="2" class="border-0" style="text-align: right">Updated Time: 15/04/2020 11:03:46
                </th>
            </tr>
        </thead>
        <tbody>
            <tr class="table-success" id="message-0" style="">
                <td colspan="3" nowrap>11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
                    <br/>11111111111111111111
                    <br/>111111111
                    <br/>1111111111111111111
                    <br/>1111111111111
                    <br/>111111111111111111
                    <br/>11111111111111111111111111111111
                    <br/>111111111111111111111111111111111111
                    <br/>11111111111111111111111111111111111
                    <br/>11111111111111111111111111111111111
                    <br/>11111111111111
                    <br/>11111111111
                    <br/>11111111
                    <br/>1111111111
                    <br/>111</td>
            </tr>
            <tr class="table-success" id="message-1" style="">
                <td colspan="3" nowrap>22222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222
                    <br/>22222222222222222222
                    <br/>222222222
                    <br/>2222222222222222222
                    <br/>2222222222222
                    <br/>222222222222222222
                    <br/>22222222222222222222222222222222
                    <br/>222222222222222222222222222222222222
                    <br/>22222222222222222222222222222222222
                    <br/>22222222222222222222222222222222222
                    <br/>22222222222222
                    <br/>22222222222
                    <br/>22222222
                    <br/>2222222222
                    <br/>222</td>
            </tr>
            <tr class="table-success" id="message-2" style="display:none">
                <td colspan="3" nowrap>33333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333
                    <br/>33333333333333333333
                    <br/>333333333
                    <br/>3333333333333333333
                    <br/>3333333333333
                    <br/>333333333333333333
                    <br/>33333333333333333333333333333333
                    <br/>333333333333333333333333333333333333
                    <br/>33333333333333333333333333333333333
                    <br/>33333333333333333333333333333333333
                    <br/>33333333333333
                    <br/>33333333333
                    <br/>33333333
                    <br/>3333333333
                    <br/>333</td>
            </tr>
            <tr class="table-success" id="message-3" style="display:none">
                <td colspan="3" nowrap>44444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444
                    <br/>44444444444444444444
                    <br/>444444444
                    <br/>4444444444444444444
                    <br/>4444444444444
                    <br/>444444444444444444
                    <br/>44444444444444444444444444444414
                    <br/>444444444444444444444444444444444444
                    <br/>44444444444444444444444444444444444
                    <br/>44444444444444444444444444444444444
                    <br/>44444444444444
                    <br/>44444444444
                    <br/>44444444
                    <br/>4444444444
                    <br/>444</td>
            </tr>
        </tbody>
    </table>
    <nav aria-label="Pagination">
        <ul class="pagination justify-content-center font-weight-medium">
            <li id="button-previous-page" class="page-item" value="1" style="cursor: pointer"><a class="page-link svg-icon" aria-label="Previous Page" title="Previous Page" rel="tooltip"><span
        aria-hidden="true" data-feather="chevrons-left">&lt;</span></a></li>
            <li id="button-next-page" class="page-item" value="2" style="cursor: pointer"><a class="page-link svg-icon" aria-label="Next Page" title="Next Page" rel="tooltip"><span aria-hidden="true" data-feather="chevrons-right">&gt;</span></a></li>
        </ul>
    </nav>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

票数 1

Stack Overflow用户

发布于 2020-04-15 14:01:08

也许你正在尝试像px这样的固定单位，这就是为什么出现问题的原因，你有没有尝试过大众，vh或em或%的东西？

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61221043

复制

相似问题

问隐藏/显示表行时的引导表对齐问题
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问隐藏/显示表行时的引导表对齐问题EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问隐藏/显示表行时的引导表对齐问题
EN