使用display:flex實作表格填充

下午好。我正在嘗試制作一個帶有徽標和表格的頁面。對于這個布局，我使用 display flex 作為包裝器。但是在使用的時候，在移動適配的時候表格的padding就消失了。如何解決這個問題？正常顯示 我想要實作 什么 我的代碼會發生什么

我的代碼

.wrapper
{
    min-height: 100%;
    overflow: hidden;
}

._container
{
    max-width: 1310px;
    margin: 0px auto;
    padding: 0px 45px;
    box-sizing: content-box;
}

.main_section{
    width: 100%;
    display: flex;
}

.table_text table{
    width: 100%;
    display: block;
}

.table_text tbody, 
.table_text th{
    width: 100%;
    display: block;
}

.table_text tbody{
    overflow-x: auto;
}

.table_text tbody tr{
    width: 100%;
    display: table-cell;
}

.table_text td{
    width: 100%;
    display: block;
}

.table__container {
    padding: 0px;
}

.yacheika td{
    padding: 34px 25px;
}
.yacheika th{
    padding: 34px 25px;
    text-align: left;
}

.title {
    text-align: center;
    padding-bottom: 40px;
}

    <div class="wrapper _container">
        <div class="main_section ">
            <div class="header__container ">
                <img src="logo.svg" alt="logo" class="header_img">
            </div>
            <div class="table__container">
                <div class="title">Table name</div>
                <div class="table_text">
                    <table>
                        <tr>
                            <th>header</th>
                            <th>header</th>
                            <th>header</th>
                            <th>header</th>
                            <th>header</th>
                        </tr>
                        <tr>
                            <td>Content</td>
                            <td>Content</td>
                            <td>Content</td>
                            <td>Content</td>
                            <td>Content</td>
                        </tr>
                        <tr>
                            <td>Content</td>
                            <td>Content</td>
                            <td>Content</td>
                            <td>Content</td>
                            <td>Content</td>
                        </tr>
                        <tr>
                            <td>Content</td>
                            <td>Content</td>
                            <td>Content</td>
                            <td>Content</td>
                            <td>Content</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>

uj5u.com熱心網友回復：

如果您在 Web 開發人員工具上使用布局檢查器，您會看到 min-wdith 被限制，因此它會溢位您的瀏覽器。您可以通過在 .table__container 規則中設定 min-width:0 來覆寫它。

.wrapper {
  min-height: 100%;
  overflow: hidden;
}

._container {
  max-width: 1310px;
  margin: 0px auto;
  padding: 0px 45px;
  box-sizing: content-box;
}

.main_section {
  width: 100%;
  display: flex;
}

.table_text table {
  width: 100%;
  display: block;
}

.table_text tbody,
.table_text th {
  width: 100%;
  display: block;
}

.table_text tbody {
  overflow-x: auto;
}

.table_text tbody tr {
  width: 100%;
  display: table-cell;
}

.table_text td {
  width: 100%;
  display: block;
}

.table__container {
  padding: 0px;
  min-width: 0; /* <--- Added this property */
}

.yacheika td {
  padding: 34px 25px;
}

.yacheika th {
  padding: 34px 25px;
  text-align: left;
}

.title {
  text-align: center;
  padding-bottom: 40px;
}

<div class="wrapper _container">
  <div class="main_section ">
    <div class="header__container ">
      <img src="https://www.fillmurray.com/200/200" alt="logo" class="header_img">
    </div>
    <div class="table__container">
      <div class="title">Table name</div>
      <div class="table_text">
        <table>
          <tr>
            <th>header</th>
            <th>header</th>
            <th>header</th>
            <th>header</th>
            <th>header</th>
          </tr>
          <tr>
            <td>Content</td>
            <td>Content</td>
            <td>Content</td>
            <td>Content</td>
            <td>Content</td>
          </tr>
          <tr>
            <td>Content</td>
            <td>Content</td>
            <td>Content</td>
            <td>Content</td>
            <td>Content</td>
          </tr>
          <tr>
            <td>Content</td>
            <td>Content</td>
            <td>Content</td>
            <td>Content</td>
            <td>Content</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>

標籤：htmlcss弹性盒填充

上一篇：如何設計HTMLCSS影像？

下一篇：HTMLCSS-我在調整影像大小時遇到??問題