html - Bootstrap 4 具有列宽的响应表

Question

我有一个 bootstrap 4 响应表。我在电脑上有这个样子。 代码是

<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-->

在手机上我得到了这个 View

当我将表类更改为自动时

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

这次上了pc

并在移动设备上正常工作。哪个好。

第一个适用于 pc，第二个适用于移动设备。

我怎样才能在这两种环境中工作？

Answer 1

试试这段代码。您不应该在表格标题中使用百分比宽度，而应该使用范围属性。

<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-->