Question

当滚动条出现时，使用bootstrap table-bordered class的表格边框的对齐不正确，尝试了许多变通方法，但问题仍然存在，有人可以帮忙吗？

这是我的hbs：

<title>UI</title>

<div ng-controller="appCtrl">

            <div class="row">
            <div class="col-md-12">
                        <table style="border-bottom: 2px solid #cccccc" class="table table-bordered">
                            <thead style="display:table;width:100%;table-layout:fixed;">
                                <tr>
                                    <th style="text-align:center;" width="15%"></th>
                                    <th style="text-align:center;" width="15%">Pending</th>
                                    <th style="text-align:center;" width="15%">Done</th>
                                </tr>
                            </thead>
                            <tbody style="display:block;height:164px;overflow:auto;">
                                <tr style="display:table;width:100%;table-layout:fixed;">
                                    <td style="text-align:center;">Task 1</td>
                                    <td style="text-align:center;"></td>
                <td style="text-align:center;"></td>
                                </tr>
                <tr style="display:table;width:100%;table-layout:fixed;">
                                    <td style="text-align:center;">Task 1</td>
                                    <td style="text-align:center;"></td>
                <td style="text-align:center;"></td>
                                </tr>
                <tr style="display:table;width:100%;table-layout:fixed;">
                                    <td style="text-align:center;">Task 1</td>
                                    <td style="text-align:center;"></td>
                <td style="text-align:center;"></td>
                                </tr>
                <tr style="display:table;width:100%;table-layout:fixed;">
                                    <td style="text-align:center;">Task 1</td>
                                    <td style="text-align:center;"></td>
                <td style="text-align:center;"></td>
                                </tr>
                <tr style="display:table;width:100%;table-layout:fixed;">
                                    <td style="text-align:center;">Task 1</td>
                                    <td style="text-align:center;"></td>
                <td style="text-align:center;"></td>
                                </tr>
                <tr style="display:table;width:100%;table-layout:fixed;">
                                    <td style="text-align:center;">Task 1</td>
                                    <td style="text-align:center;"></td>
                <td style="text-align:center;"></td>
                                </tr>
                     </tbody>
                        </table>

对齐不合适：1

Answer 1

尝试这一点，table-layout:fixed;上thead <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" > <div class="row"> <div class="col-md-12"> <table style="border-bottom: 2px solid #cccccc" class="table table-bordered"> <thead style="display:table;width:100%;"> <tr> <th style="text-align:center;" width="15%"></th> <th style="text-align:center;" width="15%">Pending</th> <th style="text-align:center;" width="15%">Done</th> </tr> </thead> <tbody style="display:table;height:164px;overflow:auto; table-layout:fixed;"> <tr style="display:table;width:100%;table-layout:fixed;"> <td style="text-align:center;">Task 1</td> <td style="text-align:center;"></td> <td style="text-align:center;"></td> </tr> <tr style="display:table;width:100%;table-layout:fixed;"> <td style="text-align:center;">Task 1</td> <td style="text-align:center;"></td> <td style="text-align:center;"></td> </tr> <tr style="display:table;width:100%;table-layout:fixed;"> <td style="text-align:center;">Task 1</td> <td style="text-align:center;"></td> <td style="text-align:center;"></td> </tr> <tr style="display:table;width:100%;table-layout:fixed;"> <td style="text-align:center;">Task 1</td> <td style="text-align:center;"></td> <td style="text-align:center;"></td> </tr> <tr style="display:table;width:100%;table-layout:fixed;"> <td style="text-align:center;">Task 1</td> <td style="text-align:center;"></td> <td style="text-align:center;"></td> </tr> <tr style="display:table;width:100%;table-layout:fixed;"> <td style="text-align:center;">Task 1</td> <td style="text-align:center;"></td> <td style="text-align:center;"></td> </tr> </tbody> </table> </div> </div> </div>是@client.comman(pass_context = True) async def some_command(ctx, bla_bla, and_bla_bla): pass边框不对齐问题的主要原因。你可以运行它看看

for {
  v1 <- transform1(v)
  v2 <- transform2(v1)
  v3 <- transformThatErrors(v2)
  v4 <- transfrom4(v3)
} yield { v4 }

当滚动条出现时，使用bootstrap table-bordered class的表格边框的对齐是不正确的

1 个答案: