how to set fix width in to table td field?

Question

Hy I"m setting up a table data using datatable but the problem is that table td filed not set to fixed width in to the table can anyone help me?

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

overflow email column

Answer 1

you can fix the total width within 100% as per your table data

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

Answer 2

you can set the width of by using CSS like if you put specific percentage of width for it was make fixed for as

<th width="10%">

it restrict td value also

Answer 3

Try this one. Hope it works. Please leave a response in comment.

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

Answer 4

You can add DIV in TD and add width to that DIV

Answer 5

.table { table-layout: fixed }