Выравнивание границ таблицы с использованием загрузочного класса с табличными границами некорректно при появлении полосы прокрутки - PullRequest
Новая
       10

Выравнивание границ таблицы с использованием загрузочного класса с табличными границами некорректно при появлении полосы прокрутки

0 голосов
/ 06 мая 2018

Выравнивание границ таблицы с использованием начального класса с классом начальной загрузки некорректно, когда появляется полоса прокрутки, прошло много обходных путей, но проблема все еще есть, может кто-нибудь помочь?

Вот мои хбс: 

<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

1 Ответ

0 голосов
/ 07 мая 2018

Попробуйте, основная причина проблемы с выравниванием границ - 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>
...