Search code examples
cssfirefoxfixed-width

!important rule in CSS not working in firefox for width style for table

Currently I am adding below style in CSS but the width is not setting properly in firefox but same is working in Chrome, IE, Mircosoft Edge. Can you please let me know how to make it work in Firefox

Please View Demo In Full Window to Produce issue in Firefox

HTML Code

 <tbody>

                    <tr class="features" ng-repeat="list in opMessageLogs">
                        <td style="width : 183px !important;">{{list._id.$id}}</td>
                        <td style="width : 353px !important;">{{list.OPERATION}}</td>
                        <td style="width : 88px !important;">{{list.STATUS}}</td>
                        <td style="width : 153px !important;">{{list.ACCOUNTNUMBER}}</td>
                        <td style="width : 130px !important;">{{list.SENDTIME.sec * 1000 | date:'yyyy-MM-dd HH:mm:ss'}}</td>
                        <td style="width : 130px !important;">{{list.RECEIVETIME.sec * 1000 | date:'yyyy-MM-dd HH:mm:ss'}}</td>
                        <td ng-click="showText(list.REQUEST,$index)" style="width : 113px !important;"><a style="cursor: pointer;">Request</a></td>
                        <td ng-click="showText(list.RESPONSE,$index)" style="width : 128px !important;"><a style="cursor: pointer;">Response</a></td>
                    </tr>

                </tbody>

Firefox Issue

As you can see in the below screenshot the width of first element is set as 183px but its reflecting as 194.867px

Firexo Issue

Solution

  • While the default UA style for td is box-sizing: border-box;, Firefox seems to have issues with with it on elements displayed as table-cell - instead, those elements always behave as box-sizing: content-box.

    As mentioned in comment9156608_7554843, adding display: inline-block for the table cells seems to be a solid workaround.