Html Bootstrap 4具有列宽的响应表

我有一个引导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-->

#
名称
参考代码
圣像牌
旅游日期
类型
电子邮件
国家
语言
地位
行动
23
名称SİRNAME
SLPT0419CAR
2.
2019-04-19
手册
name2@hotmail.com
哥伦比亚
西班牙的
悬而未决的
19
姓名Sirname
SLPT0419CARL
2.
2019-04-19
手册
name2004@yahoo.com
乌拉圭
西班牙的
悬而未决的

在手机上，我看到了这样的景象

当我将table类更改为auto时

style=“表格布局：固定；宽度：100%；”

这次我上了电脑

而在手机上，它的工作方式也应该如此。这很好

第一个对个人电脑有好处，第二个对手机有好处

---

如何在这两种环境下都能找到工作？

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

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

#
名称
参考代码
圣像牌
旅游日期
类型
电子邮件
国家
语言
地位
行动
23
名称SİRNAME
SLPT0419CAR
2.
2019-04-19
手册
name2@hotmail.com
哥伦比亚
西班牙的
悬而未决的
19
姓名Sirname
SLPT0419CARL
2.
2019-04-19
手册
name2004@yahoo.com
乌拉圭
西班牙的
悬而未决的

我在pc上以各种分辨率进行了尝试，没有问题。那么预期的外观是什么？我想说你可以看到PC2图像，但在我的侧面，图像链接没有打开。图像链接是否正常工作？