flexbox全宽表格

时间:2018-08-29 19:55:00

标签: html css css3 firefox flexbox

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

1 个答案:

答案 0 :(得分: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>