Таблица полной ширины flexbox

у меня есть этот код html / css. В хроме и опере работает нормально, а вот в firefox вроде не все. Как я могу оптимизировать код css или html для firefox. Я пробовал сделать ширину @media, но считаю, что это неправильно, просто не знаю как исправить, потому что в хроме работает, а firefox нет

.table {
    border-radius: 15px;
}
.bgSection {
    height: auto;
    border-radius: 15px;
    padding-bottom: 40px;
    padding-top: 10px;
    margin-bottom: 1rem;
}

.profileName {
    font-size: 30px;
    margin-top: 10px;
    margin-left: 40px;
}

.section2 {
    display: flex;
    justify-content: space-between;
}

.profileIcon {
    width: 256px;
    height: 256px;
    margin-left: 40px;
    margin-top: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    border-radius: 50px;

}

.table-prof {
    margin-top: 20px;
    margin-right: 20px;
    margin-left: 20px;
    border-radius: 15px;
    width: 100%;

}

<link href = "https://bootswatch.com/4/darkly/bootstrap.css" rel = "stylesheet"/>
<div class = "container">
   <div class = "bg-secondary bgSection">
      <div class = "textTransfer">
         <span class = "profileName">Text</span>
      </div>
      <div class = "section2">
         <div class = "profileIcon">
            <img src = "https://dummyimage.com/256x256/000/fff" alt = "Icon">
         </div>
         <table class = "table table-prof bg-light">
            <tbody>
               <tr>
                  <th>text1</th>
                  <th>text2</th>
               </tr>
               <tr>
                  <th>text1</th>
                  <th>text2</th>
               </tr>
            </tbody>
         </table>
      </div>
   </div>
</div>

html css firefox flexbox

29.08.2018 21:54

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

537

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете сбросить <table>display на block и использовать tbody в качестве контейнера таблицы, чтобы поддерживать эффективность table-layout.

margin-bottom, кажется, тоже добавлен для перезаписи "темной" темы

.table {
  border-radius: 15px;
}

.bgSection {
  height: auto;
  border-radius: 15px;
  padding-bottom: 40px;
  padding-top: 10px;
  margin-bottom: 1rem;
}

.profileName {
  font-size: 30px;
  margin-top: 10px;
  margin-left: 40px;
}

.section2 {
  display: flex;
  justify-content: space-between;
}

.profileIcon {
  width: 256px;
  height: 256px;
  margin-left: 40px;
  margin-top: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
  border-radius: 50px;
}

.table-prof {
  display: block;
  margin-top: 20px;
  margin-right: 20px;
  margin-left: 20px;
  border-radius: 15px;
  margin-bottom:auto!important;
}

.table-prof tbody {
  display: table;
  width: 100%;
}

<link href = "https://bootswatch.com/4/darkly/bootstrap.css" rel = "stylesheet" />
<div class = "container">
  <div class = "bg-secondary bgSection">
    <div class = "textTransfer">
      <span class = "profileName">Text</span>
    </div>
    <div class = "section2">
      <div class = "profileIcon">
        <img src = "https://server.bombdash.xyz/function/icon.php?cr=33.15&cg=33.15&cb=33.15&hr=255&hg=255&hb=255&char=bear" alt = "Icon">
      </div>
      <table class = "table table-prof bg-light">
        <tbody>
          <tr>
            <th>text1</th>
            <th>text2</th>
          </tr>
          <tr>
            <th>text1</th>
            <th>text2</th>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

29.08.2018 22:06

Другие вопросы по теме

Django - как применить CSS для набора форм радио-модели?

Wordpress - Выровняйте изображение по левому краю, чтобы текст продолжался на том же отступе под изображением

D3 Обрезаются ярлыки на круговой диаграмме

Css: div принимает минимальную ширину, а max-height = высоту страницы

Как использовать значки анимированных материалов в vuetify

Всплывающая подсказка angularjs 1.3 изменить ширину

Отключенная метка, связанная с флажком, с помощью селектора css

Как масштабировать фигуру CSS снаружи на основе изображения

Держите DIV бок о бок и сделайте страницу горизонтально прокручиваемой, если содержимое DIV слишком велико

Диалог подтверждения PrimeNG (OverLay) не имеет встроенного стиля (css)

Таблица полной ширины flexbox

Ответы 1

Другие вопросы по теме

Похожие вопросы