Bootstrap 4 Таблица Как выровнять ширину столбцов? - PullRequest
Новая
       218

Bootstrap 4 Таблица Как выровнять ширину столбцов?

0 голосов
/ 07 августа 2020

Я собираюсь создать таблицу на основе некоторых данных динамически. Некоторые столбцы и строки будут добавлены jquery позже, но прежде чем я напишу код js, я хочу видеть таблицу как черновик, чтобы убедиться, что все в порядке. Поэтому я поставил несколько фиктивных столбцов и строк, чтобы проверить, как все работает. Прямо сейчас я вижу, что некоторые столбцы имеют одинаковую ширину, а некоторые меньше. Я хочу сделать все столбцы равными.

Вот мой html код: Bootstrap 4.3.1 используется. 

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head> 
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
        </head>
    <body>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table  table-responsive table-bordered" id="tblOfferPrepItems">
                    <thead class="thead-light">
                        <tr>
                            <th scope="col" style="color:#808080">Profil</th>
                            <th scope="col" style="color:#808080">Ürün/Hizmet</th>
                            <th scope="col" style="color:#808080">İşTipi</th>
                            <th scope="col" style="color:#808080">Açıklama</th>
                            <th scope="col" style="color:#808080">Yıl</th>
                            <th scope="col" style="color:#808080">Yıl 1 Adam/Gün</th>
                            <th scope="col" style="color:#808080">Yıl 2 Adam/Gün</th>
                            <th scope="col" style="color:#808080">Yıl 3 Adam/Gün</th>
                            <th scope="col" style="color:#808080">Yıl 4 Adam/Gün</th>
                            <th scope="col" style="color:#808080">Yıl 5 Adam/Gün</th>
                            <th scope="col" style="color:#808080">Yıl 6 Adam/Gün</th>
                            <th scope="col" style="color:#808080">Yıl 7 Adam/Gün</th>
                            <th scope="col" style="color:#808080">Toplam Adam Gün</th>
                        </tr>
                    </thead>
                    <tbody id="tblOfferPrepItemsBody">
                        <tr>
                            <td>
                                <input type="text" data-id="" data-name="" id="txtProductLookup" class="form-control" readonly>
                            </td>
                            <td>
                                <input type="text" data-id="" data-name="" id="txtProductServiceLookup" class="form-control" readonly>
                            </td>
    
                            <td>
                                <input type="number" id="txtProductType" class="form-control" readonly>
                            </td>
                            <td>
                                <textarea class="form-control" id="txtDescription" rows="4"></textarea>
                            </td>
                            <td id="tdYearCode">
                                <input type="number" id="txtYearCode" class="form-control">
                            </td>
                            <td id="tdYearEffort1">
                                <input type="number" id="txtYearEffort" class="form-control">
                            </td>
                            <td id="tdYearEffort2">
                                <input type="number" id="txtYearEffort" class="form-control">
                            </td>
                            <td id="tdYearEffort3">
                                <input type="number" id="txtYearEffort" class="form-control">
                            </td>
                            <td id="tdYearEffort4">
                                <input type="number" id="txtYearEffort" class="form-control">
                            </td>
                            <td id="tdYearEffort5">
                                <input type="number" id="txtYearEffort" class="form-control">
                            </td>
                            <td id="tdYearEffort6">
                                <input type="number" id="txtYearEffort" class="form-control">
                            </td>
                            <td id="tdYearEffort7">
                                <input type="number" id="txtYearEffort" class="form-control">
                            </td>
                            <td>
                                <input type="number" id="txtTotalEffort" class="form-control">
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="card-footer" style="margin-top: 5px;">
            <div class="row">
                <div class="col" style="margin: auto; text-align: center;">
                    <button type="button" class="btn btn-secondary" id="btnCreate">
                        Oluştur
                    </button>
                </div>
                <div class="col" style="margin: auto; text-align: center;">
                    <button type="button" class="btn btn-secondary" id="btnCancel" data-toggle="modal" data-target="#cancelModal">
                        İptal
                    </button>
                    <div class="modal fade" id="cancelModal" tabindex="-1" role="dialog" aria-labelledby="cancelModalLabel" aria-hidden="true">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="cancelModalLabel">Modal title</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    Yapmış olduğunuz tüm seçimleri iptal edip sayfayı kapatmaya emin misiniz?
                                </div>
                                <div class="modal-footer">
                                    <button type="button" id="btnCancelConfirm" class="btn btn-primary">Evet</button>
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Hayır</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    </html>

Ответы [ 2 ]

1 голос
/ 07 августа 2020

Вы можете видеть, что ширина - это минимум заголовков таблиц. Некоторые столбцы меньше, потому что в заголовке таблицы всего несколько букв.

В качестве решения вы можете установить ширину th, чтобы все они имели одинаковую ширину. Вы можете сделать это относительно или с фиксированной шириной 

th, td{
width: 7.7% /* relative: 100%:13 columns= 7.6923076923 per column */
width: 50px /* fixed */
}

Для ширины есть только bootstrap -классы: 25%, 50%, 75% и 100%, поэтому вам нужно настроить правило в css. Ваша таблица также должна быть достаточно широкой, чтобы содержимое отображалось правильно.

0 голосов
/ 07 августа 2020 

table{
    width: 100%;
    display: table !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
}
table tr td,table tr th{
    display: table-cell !important;
    vertical-align: middle !important;
    width:130px;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head> 
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
        </head>
    <body>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table  table-responsive table-bordered" id="tblOfferPrepItems">
                    <thead class="thead-light">
                        <tr>
                            <th scope="col" style="color:#808080">Profil</th>
                            <th scope="col" style="color:#808080">Ürün/Hizmet</th>
                            <th scope="col" style="color:#808080">İşTipi</th>
                            <th scope="col" style="color:#808080">Açıklama</th>
                            <th scope="col" style="color:#808080">Yıl</th>
                            <th scope="col" style="color:#808080">Yıl 1 Adam/Gün</th>
                            <th scope="col" style="color:#808080">Yıl 2 Adam/Gün</th>
                            <th scope="col" style="color:#808080">Yıl 3 Adam/Gün</th>
                            <th scope="col" style="color:#808080">Yıl 4 Adam/Gün</th>
                            <th scope="col" style="color:#808080">Yıl 5 Adam/Gün</th>
                            <th scope="col" style="color:#808080">Yıl 6 Adam/Gün</th>
                            <th scope="col" style="color:#808080">Yıl 7 Adam/Gün</th>
                            <th scope="col" style="color:#808080">Toplam Adam Gün</th>
                        </tr>
                    </thead>
                    <tbody id="tblOfferPrepItemsBody">
                        <tr>
                            <td>
                                <input type="text" data-id="" data-name="" id="txtProductLookup" class="form-control" readonly>
                            </td>
                            <td>
                                <input type="text" data-id="" data-name="" id="txtProductServiceLookup" class="form-control" readonly>
                            </td>
    
                            <td>
                                <input type="number" id="txtProductType" class="form-control" readonly>
                            </td>
                            <td>
                                <textarea class="form-control" id="txtDescription" rows="4"></textarea>
                            </td>
                            <td id="tdYearCode">
                                <input type="number" id="txtYearCode" class="form-control">
                            </td>
                            <td id="tdYearEffort1">
                                <input type="number" id="txtYearEffort" class="form-control">
                            </td>
                            <td id="tdYearEffort2">
                                <input type="number" id="txtYearEffort" class="form-control">
                            </td>
                            <td id="tdYearEffort3">
                                <input type="number" id="txtYearEffort" class="form-control">
                            </td>
                            <td id="tdYearEffort4">
                                <input type="number" id="txtYearEffort" class="form-control">
                            </td>
                            <td id="tdYearEffort5">
                                <input type="number" id="txtYearEffort" class="form-control">
                            </td>
                            <td id="tdYearEffort6">
                                <input type="number" id="txtYearEffort" class="form-control">
                            </td>
                            <td id="tdYearEffort7">
                                <input type="number" id="txtYearEffort" class="form-control">
                            </td>
                            <td>
                                <input type="number" id="txtTotalEffort" class="form-control">
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="card-footer" style="margin-top: 5px;">
            <div class="row">
                <div class="col" style="margin: auto; text-align: center;">
                    <button type="button" class="btn btn-secondary" id="btnCreate">
                        Oluştur
                    </button>
                </div>
                <div class="col" style="margin: auto; text-align: center;">
                    <button type="button" class="btn btn-secondary" id="btnCancel" data-toggle="modal" data-target="#cancelModal">
                        İptal
                    </button>
                    <div class="modal fade" id="cancelModal" tabindex="-1" role="dialog" aria-labelledby="cancelModalLabel" aria-hidden="true">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="cancelModalLabel">Modal title</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    Yapmış olduğunuz tüm seçimleri iptal edip sayfayı kapatmaya emin misiniz?
                                </div>
                                <div class="modal-footer">
                                    <button type="button" id="btnCancelConfirm" class="btn btn-primary">Evet</button>
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Hayır</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    </html>

Пожалуйста, используйте это вместо ...

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...