Question

为什么我要使用datatable设置表数据，但问题是表td字段未设置为表的固定宽度，有人可以帮助我吗？

<style>

    #mytable > tbody > tr > td:nth-child(1), #mytable > thead > tr > th:nth-child(1) {width:5%; text-align: center;}
    #mytable > tbody > tr > td:nth-child(2), #mytable > thead > tr > th:nth-child(2) {width:10%;text-align: right;}
    #mytable > tbody > tr > td:nth-child(3), #mytable > thead > tr > th:nth-child(3) {width:20%;text-align: right;}
    #mytable > tbody > tr > td:nth-child(4), #mytable > thead > tr > th :nth-child(4) {width:10%;text-align: right;}
    #mytable > tbody > tr > td:nth-child(5), #mytable > thead > tr > th:nth-child(5) {width:5%;text-align: right;}
    #mytable > tbody > tr > td:nth-child(6), #mytable > thead > tr > th:nth-child(6) {width:5%;text-align: right;}
    #mytable > tbody > tr > td:nth-child(7), #mytable > thead > tr > th:nth-child(7) {width:10%;text-align: right; border-left: 1px solid #dee2e6;}
    #mytable > tbody > tr > td:nth-child(8), #mytable > thead > tr > th:nth-child(8) {width:35%;text-align: right;}
    #mytable > thead > tr > th { text-align: center !important; };
</style>

<table id="mytable" class="table table-bordered table-striped" style="width: 100%;">
    <thead>
        <tr>
            <th>#</th>
            <th>name </th>
            <th>Email</th>
            <th>Phone</th>
            <th>add</th>
            <th>city</th>
            <th>contry</th>
            <th>zip code</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>test table</td>
            <td>test table</td>
            <td>test table test table test table agin</td>
            <td>test table</td>
            <td>test table</td>
            <td>test table</td>
            <td>test table</td>
            <td>test table test  test demo</td>

        </tr>

    </tbody>
</table>

电子邮件溢出列

Answer 1

您可以在TD中添加DIV，并为该DIV添加宽度

Answer 2

尝试这个。希望它能工作。请发表评论。

 table {
     table-layout: fixed;
}
 td{
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
}

Answer 3

.table { table-layout: fixed }

Answer 4

您可以使用CSS之类的设置宽度如果您将宽度的特定百分比固定为

<th width="10%">

也限制td值

Answer 5

您可以根据表格数据在100%内固定总宽度

<th width="3%">S.no</th>
<th width="10%"> Date</th>
<th width="10%">branch</th>
<th width="10%">Employee</th>
<th width="10%"> Name</th>
<th width="10%">Contact</th>
<th width="17%">Questions</th>
<th width="5%">Question Type</th>
<th width="10%">Answer</th>
<th width="5%">Order ID</th>
<th width="5%">Order Value</th>

如何设置固定宽度到表TD字段？

5 个答案: