!важное правило в CSS не работает в firefox для стиля ширины таблицы

В настоящее время я добавляю ниже стиль в CSS, но ширина не устанавливается должным образом в firefox, но то же самое работает в Chrome, IE, Mircosoft Edge. Подскажите, пожалуйста, как заставить его работать в Firefox?

Пожалуйста, просмотрите демонстрацию в полноэкранном режиме, чтобы создать проблему в Firefox

HTML-код

 <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

Как вы можете видеть на снимке экрана ниже, ширина первого элемента задана как 183 пикселя, но отображается как 194,867 пикселя.

Проблема с Firexo


css fixed-width firefox
person Ron    schedule 20.11.2016    source источник
comment
Ширина, отображаемая в инспекторе, также включает padding и border. В данном случае это должно быть 183px + 2 * 8px = 199px. Я думаю, вы установили ширину таблицы на 100%. td будут вписываться в заданную ширину таблицы и, следовательно, игнорировать точное значение, которое вы им назначаете.   -  person naeramarth7    schedule 20.11.2016
comment
Но то же самое работает в другом браузере, что мне нужно изменить сейчас.   -  person Ron    schedule 20.11.2016
comment
Если вы установите для ширины таблицы относительное значение (например, 100%), ячейки также должны быть относительными (в %). Если вы хотите, чтобы ширина ячеек была точно такой, как указано в свойстве стиля, вы должны убедиться, что таблица имеет абсолютную ширину (в px) в соответствии с накопленным значением ячеек. Однако это может привести к переполнению, если окно браузера недостаточно широкое.   -  person naeramarth7    schedule 20.11.2016
comment
У меня должен быть OverScroll, так как я убедился, что переполнение с полосой прокрутки   -  person Ron    schedule 20.11.2016
comment
В этом случае я должен попросить вас воспроизвести вашу конкретную проблему (в jsbin, jsfiddle и т. д.), поскольку невозможно ответить, не видя полного контекста.   -  person naeramarth7    schedule 20.11.2016
comment
Я обновил вопрос с демонстрацией jsbin, не могли бы вы помочь.   -  person Ron    schedule 20.11.2016
comment
Давайте продолжим обсуждение в чате.   -  person Ron    schedule 20.11.2016
comment
Давайте продолжим обсуждение в чате.   -  person Ron    schedule 20.11.2016

Ответы (2)


arrow_upward
2
arrow_downward

Хотя стиль UA по умолчанию для td — box-sizing: border-box;, Firefox, похоже, имеет проблемы с ним для элементов, отображаемых как table-cell — вместо этого эти элементы всегда ведут себя как box-sizing: content-box.

Как указано в comment9156608_7554843 , добавление display: inline-block для ячеек таблицы кажется надежным обходным путем.

person naeramarth7    schedule 20.11.2016

arrow_upward
0
arrow_downward

В некоторых случаях, как у меня, Firefox просто не применяет width: 100%; и display: table;, он просто не распознается или что-то еще, я не знаю. Затем я немного поискал и нашел способ заставить таблицу отображения работать правильно в Firefox, изменив значение ширины width: -moz-max-content;.

Вот полный код

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

На всякий случай, если у кого-то такая же проблема, как у меня.

person Wachid    schedule 17.11.2017