个人中心
gpt4 book ai didi

html - 带有表格的 Flex div 不遵循 flex 宽度

转载 作者：行者123 更新时间：2023-11-28 15:19:42 25 4
gpt4 key购买 nike

<分区>

我在一列和一行中有一个 flex 元素的组合，如下图:

enter image description here

此图像是使用以下代码构建的:

<div class="container">
  <div class='header'>
    THIS IS A TEST CODE WITH TEXT
  </div>

  <div class='content'>
    <div class='leftcontent'>
      CONTENT OF LEFT SIDE
    </div>
    <div class='rightcontent'>
      CONTENT OF RIGHT SIDE
    </div>
  </div>
</div>

<br />
<br />

<div class="container">
  <div class='header'>
    THIS IS A TEST CODE WITH TABLE
  </div>

  <div class='content'>
    <div class='leftcontent'>
      <table>
        <thead>
          <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
            <th>Column 4</th>
          </tr>

        </thead>
        <tbody>
          <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
            <td>Data 4</td>
          </tr>

        </tbody>
      </table>
    </div>
    <div class='rightcontent'>
      CONTENT OF RIGHT SIDE
    </div>
  </div>
</div>

CSS:

.container {
  display: flex;
  flex-direction: column;
  background-color: grey;
  width: 100%;
  height: 200px;
}

.header {
  flex: 1;
  text-align: center;
}

.content {
  flex: 1;
  display: flex;
  flex-direction: row;
}

.leftcontent {
  flex: 5;
  background-color: green;
}

.rightcontent {
  flex: 5;
  background-color: yellow;
}

上层模式是用文本做的测试。底部架构是尝试使用左侧的表格。

如您所见，在底部架构中，表格比预期的要大，并且不符合我的 flex 规则。我知道表格有一个特殊的呈现机制，但我需要帮助将表格宽度设置为 50%，就像只有文本的模式一样。在那种情况下，我需要溢出的表格显示水平滚动条，就在内容的左侧(与表格相关，因此我可以水平滚动它并查看其内容)。

Here is the JSFiddle for it

25 4 0
文章推荐： javascript - 使用正则表达式删除没有内容或只有空白的 div
文章推荐： swift - 如何通过函数外的按钮修改函数？
文章推荐： javascript - Material Design Lite 和 jQuery，平滑滚动出现问题
文章推荐： ios - 在 SpriteNode 上重复操作
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com