html - flexbox 全宽表格

Question

我有这个 html/css 代码。在 chrome 和 opera 中运行良好，但在 firefox 中，似乎一切都不对。如何优化 firefox 的 css 或 html 代码。我试图使@media 宽度变大，但我认为这是错误的。我只是不知道如何解决它，因为它在 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://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>

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>