html - 如何在表格 td 字段中设置固定宽度？

Question

我正在使用数据表设置表格数据，但问题是表格 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

试试这个。希望它有效。请在评论中留下回复。

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