flexbox 全宽表格

Question

i have this html/css code. It works fine in chrome and opera, but in firefox, everything does not seem to be right. How can I optimize the css or html code for firefox. I tried to make @media width, but I think it's wrong.I just do not know how to fix it, because it works in chrome, and there's no 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

You may reset the <table> display to block and use tbody to be the table container to keep the table-layout efficient.

margin-bottom seems also to be added to overwrite the 'dark' theme

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