CSS -flexbox中的表格太宽

zpf6vheq 于 2023-06-07 发布在其他

关注(0)|答案(2)|浏览(75)

我创建我的布局与flexbox，现在我想显示表。但是当一个表有很多记录时，它不会添加滚动条，它会溢出页面。有人知道该怎么做吗？我在网上找过各种各样的方法，发现了这个问题，但是，我没有找到一个完全可靠的解决方案。为了简单起见，我简化了这个例子。谢谢你

<div>
  <div style="display: flex;">
    <!-- Layout -->
    <div style="display: flex;">
      <!-- Layout -->
      <div style="display: flex;">
        <!-- Layout -->
        <div>
          <table>
            <tr>
              <th>Name</th>
              <th>Age</th>
              <th>City</th>
              <th>Note</th>
            </tr>
            <tr>
              <td>Pepík zdenda z Brna</td>
              <td>245</td>
              <td>Sat Oct 10 1998 00:00:00 GMT+0200 (Central European Summer Time)</td>
              <td>Moc dlouha poznamka, ktera je fakt nesnesitelně dlouha</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

结果：

我想要的：

非常感谢

编辑：

我有什么：

我想要的：

css

来源：https://stackoverflow.com/questions/76408336/css-too-wide-table-in-flexbox

2条答案

按热度按时间

0yg35tkg1#

我已经在表的父div上添加了overflow-x: auto;，你可以找到更多关于table responsiveness here的细节，并在表中添加了一些样式，比如填充，从我的Angular 来看，它是有效的。

th, td {
  text-align: left;
  padding: 10px;
}

<div>
  <div style="display: flex;">
    <!-- Layout -->
    <div style="display: flex;">
      <!-- Layout -->
      <div style="display: flex;">
        <!-- Layout -->
        <div style="overflow-x:auto;">
          <table>
            <tr>
              <th>Name</th>
              <th>Age</th>
              <th>City</th>
              <th>Note</th>
              <th>Name</th>
              <th>Age</th>
              <th>City</th>
              <th>Note</th>
              <th>Name</th>
              <th>Age</th>
              <th>City</th>
              <th>Note</th>
            </tr>
            <tr>
              <td>Pepík zdenda z Brna</td>
              <td>245</td>
              <td>Sat Oct 10 1998 00:00:00 GMT+0200 (Central European Summer Time)</td>
              <td>Moc dlouha poznamka, ktera je fakt nesnesitelně dlouha</td>
              <td>Pepík zdenda z Brna</td>
              <td>245</td>
              <td>Sat Oct 10 1998 00:00:00 GMT+0200 (Central European Summer Time)</td>
              <td>Moc dlouha poznamka, ktera je fakt nesnesitelně dlouha</td>
            <td>Pepík zdenda z Brna</td>
              <td>245</td>
              <td>Sat Oct 10 1998 00:00:00 GMT+0200 (Central European Summer Time)</td>
              <td>Moc dlouha poznamka, ktera je fakt nesnesitelně dlouha</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

你可以在代码中看到我添加了更多的列，它正在工作。

赞(0）回复(0）举报 2023-06-07

z9ju0rcb2#

尝试添加overflow-x: scroll;并记住在head中包含<meta name="viewport" content="width=device-width, initial-scale=1.0">。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    th, td {
    text-align: left;
    padding: 10px;
  }
  
  </style>
</head>
<body>

<div>
<h1>Title</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

<div style="width:90%;" >
  <div style="display: flex;  overflow-x: scroll;">
    <!-- Layout -->
    <div style="display: flex;">
      <!-- Layout -->
      <div style="display: flex; ">
        <!-- Layout -->
        <div>
          <table>
            <tr>
              <th>Name</th>
              <th>Age</th>
              <th>City</th>
              <th>Note</th>
              <th>Name</th>
              <th>Age</th>
              <th>City</th>
              <th>Note</th>
              <th>Name</th>
              <th>Age</th>
              <th>City</th>
              <th>Note</th>
            </tr>
            <tr>
              <td>Pepík zdenda z Brna</td>
              <td>245</td>
              <td>Sat Oct 10 1998 00:00:00 GMT+0200 (Central European Summer Time)</td>
              <td>Moc dlouha poznamka, ktera je fakt nesnesitelně dlouha</td>
              <td>Pepík zdenda z Brna</td>
              <td>245</td>
              <td>Sat Oct 10 1998 00:00:00 GMT+0200 (Central European Summer Time)</td>
              <td>Moc dlouha poznamka, ktera je fakt nesnesitelně dlouha</td>
            <td>Pepík zdenda z Brna</td>
              <td>245</td>
              <td>Sat Oct 10 1998 00:00:00 GMT+0200 (Central European Summer Time)</td>
              <td>Moc dlouha poznamka, ktera je fakt nesnesitelně dlouha</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
  
</body>
</html>

赞(0）回复(0）举报 2023-06-07

我来回答

CSS -flexbox中的表格太宽

2条答案

相关问题

热门标签

最新问答