flexbox 全宽表格答案

【问题标题】：flexbox full width tableflexbox 全宽表格
【发布时间】：2019-02-04 16:45:34
【问题描述】：

我有这个 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>

【问题讨论】：

标签： html css firefox flexbox

【解决方案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>

【讨论】：