html - Adjust table column width by percentage

Question

I want to set the width of each column based on the percentage. I wrote the following CSS, but it does not apply to the column table my code:

<table class="footable table Grid table table-striped table-bordered smart-form dataTable default breakpoint footable-loaded">
    <thead>
        <tr>
             <th class="tenpercent footable-first-column" style="direction:rtl; text-align:right;" data-hide="">select<div><input id="SelectAllRows" class="selectallrows" type="checkbox"></div> </th>
             
             ...
        </tr>
    </thead>
    <tbody>
            <tr>
                <td class="tenpercent footable-first-column"><span class="footable-toggle"></span> 
                    <input class="select" id="36174" name="36174" type="checkbox" value="true"><input name="36174" type="hidden" value="false">
                </td>
                ...
             </tr> 
    </tbody>

</table>


<style>
th.tenpercent, td.tenpercent {
    min-width: 5%;
    max-width: 5%;
    width: 5%;
}
</style>

Why?

Answer 1

You can use style attribute in td to set width% of the column.

<tbody>
            <tr>
                <td class="tenpercent footable-first-column" style='width: 5%'><span class="footable-toggle"></span> 
                    <input class="select" id="36174" name="36174" type="checkbox" value="true"><input name="36174" type="hidden" value="false">
                </td>
                ...
             </tr> 
    </tbody>