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

Question

У меня есть этот код HTML / CSS. Он отлично работает в Chrome и Opera, но в Firefox, кажется, не все правильно. Как я могу оптимизировать CSS или HTML-код для Firefox. Я пытался сделать @media width, но я думаю, что это неправильно. Я просто не знаю, как это исправить, потому что он работает в chrome, и нет 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://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>

Answer 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>