0

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

j08691
  • 204,283
  • 31
  • 260
  • 272
Mahesh G
  • 1,226
  • 4
  • 30
  • 57
  • The width reflected in the inspector also includes `padding` and `border`. In this case, it should be `183px + 2 * 8px = 199px`. I guess you set your table's width to `100%`. The `td`s will fit into the given table width - and therefore ignore the *exact* value you assign them. – naeramarth7 Nov 20 '16 at 15:13
  • But same is working in other browser, What I need to change now.. – Mahesh G Nov 20 '16 at 15:25
  • If you set you're table width to a relative value (like `100%`), the cells should be *relative* (in `%`) as well. If you want the cells width to be exactly as given in the style property, you have to make sure the table has a *absolute* width (in `px`) according to the cells accumulated value. This might result in an overflow though, if the browser window is not wide enough. – naeramarth7 Nov 20 '16 at 15:34
  • I am to have OverScroll as I have made sure overflow with Scrollbar – Mahesh G Nov 20 '16 at 15:36
  • 1
    In this case, I have to ask you to reproduce your specific issue (in a jsbin, jsfiddle, etc.), since it's not possible to answer without being able to see the full context. – naeramarth7 Nov 20 '16 at 15:38
  • I have updated the question with jsbin demo , Can you please help. – Mahesh G Nov 20 '16 at 15:43
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/128572/discussion-between-batman-and-naeramarth7). – Mahesh G Nov 20 '16 at 15:48
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/128574/discussion-between-batman-and-naeramarth7). – Mahesh G Nov 20 '16 at 16:57

2 Answers2

2

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.

naeramarth7
  • 6,030
  • 1
  • 22
  • 26
0

In some case like mine, firefox just doesn't apply width: 100%; and display: table;, It just not recognized or something else, i don't know. Then i did a little search and find a way to make display table work correctly in firefox by changing the width value width: -moz-max-content;.

Here is the full code

display: table !important;
position: absolute;
top: 25px;
left: 0;
width: -moz-max-content;

Just in case if someone have same trouble like me.

Wachid
  • 447
  • 5
  • 8