Question

我有一个bootstrap 4响应表。我在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-->

在移动设备上我有此视图

当我将表类更改为自动时

style =“ table-layout：固定；宽度：100％；”

这次我上了电脑

在移动作品上应有的表现。哪个好。

第一个对个人电脑有利，第二个对手机有利。

如何在两种环境下工作？

Answer 1

尝试此代码。您不应在表标题中使用百分比宽度，而应在scope属性中使用。

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

具有列宽的Bootstrap 4响应表

1 个答案: