Bootstrap 4 Отзывчивый стол с шириной столбца - PullRequest
Новая
       5

Bootstrap 4 Отзывчивый стол с шириной столбца

0 голосов
/ 11 декабря 2018

У меня есть адаптивная таблица начальной загрузки 4.и у меня есть этот взгляд на ПК.On THE PC и код 

<table class="table table-bordered m-table m-table--border-metal m-table--head-bg-primary" style="table-layout: fixed; width:100%;">
    <!--begin::Thead-->
    <thead>
        <tr>
            <th width="3%">#</th>
            <th width="15%">Name</th>
            <th width="8%">Ref. Code</th>
            <th width="3%">Pax</th>
            <th width="8%">Tour dates</th>
            <th width="10%">Type</th>
            <th width="10%">Email</th>
            <th width="8%">Country</th>
            <th width="7%">Language</th>
            <th width="7%">Status</th>
            <th width="21%">Actions</th>
        </tr>
    </thead>
    <!--end::Thead-->
    <!--begin::Tbody-->
    <tbody>
            <tr>
                <td>23</td>
                <td style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;" title="Name Sirname">NAME SİRNAME</td>
                <td>SLPT0419CAR</td>
                <td>2</td>
                <td>2019-04-19</td>
                <td>manual</td>
                <td style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;" title="name2@hotmail.com">name2@hotmail.com</td>
                <td>Colombia</td>
                <td>Spanish</td>
                <td>Pending</td>
                <td>
                    <a href="#"><button type="button" class="btn btn-success btn-sm"><i class="la la-eye"></i> Details</button></a> &nbsp;
                    <a href="#"><button type="button" class="btn btn-warning btn-sm"><i class="la la-pencil"></i>Edit</button></i></a> &nbsp;
                    <a href="javascript:;" onclick="delete_request(23)"><button type="button" class="btn btn-danger btn-sm"><i class="la la-trash"></i>Delete</button></a>
                </td>

            </tr>
            <tr>
                <td>19</td>
                <td style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;" title="name sirname">Name Sirname</td>
                <td>SLPT0419CARL</td>
                <td>2</td>
                <td>2019-04-19</td>
                <td>manual</td>
                <td style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;" title="name2004@yahoo.com">name2004@yahoo.com</td>
                <td>Uruguay</td>
                <td>Spanish</td>
                <td>Pending</td>
                <td>
                    <a href="#"><button type="button" class="btn btn-success btn-sm"><i class="la la-eye"></i> Details</button></a> &nbsp;
                    <a href="#"><button type="button" class="btn btn-warning btn-sm"><i class="la la-pencil"></i>Edit</button></i></a> &nbsp;
                    <a href="javascript:;" onclick="delete_request(19)"><button type="button" class="btn btn-danger btn-sm"><i class="la la-trash"></i>Delete</button></a>
                </td>

            </tr>                  
    </tbody>
    <!--end::Tbody-->                                           
</table>
<!--end::Table-->

На мобильном телефоне я получил это представление

MObile1

КогдаЯ изменяю класс таблицы на auto

style = "table-layout: fixed; width: 100%;"

На этот раз я попал на компьютер

PC2 и на мобильном работает как положено.Что хорошо.

Mobile2

Первый подходит для ПК, а второй - для мобильного.

Как я могуполучить работу в обеих средах?

1 Ответ

0 голосов
/ 11 декабря 2018

Попробуйте этот код.Вы не должны использовать процентную ширину в заголовках таблицы, но атрибут области.

<table class="table table-bordered m-table m-table--border-metal m-table--head-bg-primary">
    <!--begin::Thead-->
    <thead>
        <tr>
            <th  scope="col" >#</th>
            <th  scope="col" >Name</th>
            <th  scope="col" >Ref. Code</th>
            <th  scope="col" >Pax</th>
            <th   scope="col">Tour dates</th>
            <th  scope="col">Type</th>
            <th  scope="col">Email</th>
            <th  scope="col">Country</th>
            <th  scope="col">Language</th>
            <th  scope="col">Status</th>
            <th  scope="col">Actions</th>
        </tr>
    </thead>
    <!--end::Thead-->
    <!--begin::Tbody-->
    <tbody>
            <tr>
                <th >23</th>
                <td style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;" title="Name Sirname">NAME SİRNAME</td>
                <td>SLPT0419CAR</td>
                <td>2</td>
                <td>2019-04-19</td>
                <td>manual</td>
                <td style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;" title="name2@hotmail.com">name2@hotmail.com</td>
                <td>Colombia</td>
                <td>Spanish</td>
                <td>Pending</td>
                <td>
                    <a href="#"><button type="button" class="btn btn-success btn-sm"><i class="la la-eye"></i> Details</button></a> &nbsp;
                    <a href="#"><button type="button" class="btn btn-warning btn-sm"><i class="la la-pencil"></i>Edit</button></i></a> &nbsp;
                    <a href="javascript:;" onclick="delete_request(23)"><button type="button" class="btn btn-danger btn-sm"><i class="la la-trash"></i>Delete</button></a>
                </td>

            </tr>
            <tr>
                <th>19</th>
                <td style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;" title="name sirname">Name Sirname</td>
                <td>SLPT0419CARL</td>
                <td>2</td>
                <td>2019-04-19</td>
                <td>manual</td>
                <td style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;" title="name2004@yahoo.com">name2004@yahoo.com</td>
                <td>Uruguay</td>
                <td>Spanish</td>
                <td>Pending</td>
                <td>
                    <a href="#"><button type="button" class="btn btn-success btn-sm"><i class="la la-eye"></i> Details</button></a> &nbsp;
                    <a href="#"><button type="button" class="btn btn-warning btn-sm"><i class="la la-pencil"></i>Edit</button></i></a> &nbsp;
                    <a href="javascript:;" onclick="delete_request(19)"><button type="button" class="btn btn-danger btn-sm"><i class="la la-trash"></i>Delete</button></a>
                </td>

            </tr>                  
    </tbody>
    <!--end::Tbody-->                                           
</table>
<!--end::Table-->
...