Anup Gupta Anup Gupta - 2 months ago 8
CSS Question

Cells in Columns doesn't have same width

I want all of the cells in a column to have same width. number of columns will be changed in future, so the cell with the highest width would be the default width of its respective column.
I hope I have explained my situation here.

Here's my code and fiddle.



table.lead-data2 {
width: 100%;
table-layout: fixed;
white-space: nowrap;
}
table.lead-data2 th,
table.lead-data2 td {
padding: 10px 15px;
display: inline-block;
}
table.lead-data2 tr {
border: 1px solid #eee;
border-right-color: transparent!important;
border-left-color: transparent!important;
}

<table class="lead-data2" style="overflow-x:auto;">
<thead>
<tr>
<th>
<input type="checkbox" id="allcb" name="allcb">
</th>
<th>Name</th>
<th>Status</th>
<th>Class</th>
<th>Contact No.</th>
<th>Last Updated</th>
<th>Follow Up</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" id="cb1" name="cb[]">
</td>
<td>Appy Mccoy</td>
<td>Pending</td>
<td>8th A</td>
<td>8989898989</td>
<td>31 August 2016</td>
<td>31 August 2016</td>
</tr>
<tr>
<td>
<input type="checkbox" id="cb2" name="cb[]">
</td>
<td>Andrew Damon</td>
<td>Pending for Now</td>
<td>8th A</td>
<td>8989898989</td>
<td>31 August 2016</td>
<td>31 August 2016</td>
</tr>
<tr>
<td>
<input type="checkbox" id="cb3" name="cb[]">
</td>
<td>Ritesh Shukla</td>
<td>Confirmed</td>
<td>8th A</td>
<td>8989898989</td>
<td>31 August 2016</td>
<td>31 August 2016</td>
</tr>
<tr>
<td>
<input type="checkbox" id="cb4" name="cb[]">
</td>
<td>Anup gupta</td>
<td>Pending</td>
<td>8th A</td>
<td>8989898989</td>
<td>31 August 2016</td>
<td>31 August 2016</td>
</tr>


</tbody>
</table>





I have tried table layout fixed property but it doesn't seem to work..
I know there's already many questions related to this stuff but things didn't work out for me.

Answer

Checkout

table.lead-data2{
    width: "(100/x)%";
     table-layout: fixed;
    white-space: nowrap;
    
}

table.lead-data2 th, table.lead-data2 td{
    width: "(100/x)%";
     padding: 10px 15px;
}
    
    table.lead-data2 tr{
    border: 1px solid #eee;
    border-right-color: transparent!important;
    border-left-color: transparent!important;
     width: "(100/x)%";
}
<table class="lead-data2" style="overflow-x:auto;">
            <thead>
                <tr>
                <th><input type="checkbox" id="allcb" name="allcb"></th>
                <th>Name</th>
                <th>Status</th>
                <th>Class</th>
                <th>Contact No.</th>
                <th>Last Updated</th>
                <th>Follow Up</th>
                </tr>
            </thead>
            <tbody>
             <tr>
            <td><input type="checkbox" id="cb1" name="cb[]"></td> 
                <td>Appy Mccoy</td>
                <td>Pending</td>
                <td>8th A</td>
                <td>8989898989</td>
                <td>31 August 2016</td>
                <td>31 August 2016</td>
            </tr>  
                <tr>
            <td><input type="checkbox" id="cb2" name="cb[]"></td> 
                <td>Andrew Damon</td>
                <td>Pending for Now</td>
                <td>8th A</td>
                <td>8989898989</td>
                <td>31 August 2016</td>
                <td>31 August 2016</td>
            </tr>  
                <tr>
            <td><input type="checkbox" id="cb3" name="cb[]"></td> 
                <td>Ritesh Shukla</td>
                <td>Confirmed</td>
                <td>8th A</td>
                <td>8989898989</td>
                <td>31 August 2016</td>
                <td>31 August 2016</td>
            </tr>  
                 <tr>
            <td><input type="checkbox" id="cb4" name="cb[]"></td> 
                <td>Anup gupta</td>
                <td>Pending</td>
                <td>8th A</td>
                <td>8989898989</td>
                <td>31 August 2016</td>
                <td>31 August 2016</td>
            </tr>  
                
               
            </tbody>
            </table>

As you need to add width: "(100/x)%";