首页 / 技术问答 / Html问答列表 / 问答详情

HTML表格溢出如何拉伸页面上的其他内容以匹配表格宽度

我有一个页面，上面有一张大桌子和一个页脚.桌子不适合水平放置，所以有一个滚动条(这很好)，但问题是表格下方的页脚不能伸展到与表格宽度匹配.请参阅以下说明该问题的CodePen:

https://codepen.io/pglazkov/pen/XWEPjvo个

enter image description here

如何使包含表格(红框)和页脚(绿框)的div与表格宽度匹配？

以下是上例中的代码:

.container {
  overflow: auto;
  width: 800px;
}

.table-container {
  background-color: red;
}

table {
  width: 100%;
}

td,
th {
  text-align: left;
  padding: 8px;
  white-space: nowrap;
}

footer {
  background-color: green;
  min-height: 100px;
}
<div class="container">
  <div class="table-container">
    <table>
      <tr>
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
        <th>Company2</th>
        <th>Contact2</th>
        <th>Country2</th>
        <th>Company3</th>
        <th>Contact3</th>
        <th>Country3</th>
      </tr>
      <tr>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
      </tr>
      <tr>
        <td>Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
        <td>Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
        <td>Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
      </tr>
      <tr>
        <td>Ernst Handel</td>
        <td>Roland Mendel</td>
        <td>Austria</td>
        <td>Ernst Handel</td>
        <td>Roland Mendel</td>
        <td>Austria</td>
        <td>Ernst Handel</td>
        <td>Roland Mendel</td>
        <td>Austria</td>
      </tr>
      <tr>
        <td>Island Trading</td>
        <td>Helen Bennett</td>
        <td>UK</td>
        <td>Island Trading</td>
        <td>Helen Bennett</td>
        <td>UK</td>
        <td>Island Trading</td>
        <td>Helen Bennett</td>
        <td>UK</td>
      </tr>
      <tr>
        <td>Laughing Bacchus Winecellars</td>
        <td>Yoshi Tannamuri</td>
        <td>Canada</td>
        <td>Laughing Bacchus Winecellars</td>
        <td>Yoshi Tannamuri</td>
        <td>Canada</td>
        <td>Laughing Bacchus Winecellars</td>
        <td>Yoshi Tannamuri</td>
        <td>Canada</td>
      </tr>
      <tr>
        <td>Magazzini Alimentari Riuniti</td>
        <td>Giovanni Rovelli</td>
        <td>Italy</td>
        <td>Magazzini Alimentari Riuniti</td>
        <td>Giovanni Rovelli</td>
        <td>Italy</td>
        <td>Magazzini Alimentari Riuniti</td>
        <td>Giovanni Rovelli</td>
        <td>Italy</td>
      </tr>
    </table>
  </div>

  <footer>This is footer</footer>
</div>

推荐答案

将<table>的父元素(.table-container，在示例<section>中)环绕<table>和<footer>.关键规则集是:

/* In example, it is <section> */
.table-container {
  width: max-content; /* Set width to the width of it's content */
}

默认情况下，所有块级元素(如<div>和<footer>)都是width: 100%，因此通常不需要添加它.

通过将父级设置为其内容的最大宽度，<table>将扩展到满足其全部<th>和<td>的宽度，而不会将文本拆分成新的行.现在，因为<footer>自然是width: 100%，所以它将符合父元素的宽度，而父元素的宽度又由父元素的<table>到width: max-content的宽度决定.

body {
  background-color: blue;
}

main {
  margin: 10px auto;
}

section {
  background-color: red;
  width: max-content;
}

td,
th {
  text-align: left;
  padding: 8px;
  white-space: nowrap;
}

footer {
  min-height: 100px;
  background-color: green;
}
<main>
  <section>
    <table>
      <thead>
        <tr>
          <th>Company</th>
          <th>Contact</th>
          <th>Country</th>
          <th>Company2</th>
          <th>Contact2</th>
          <th>Country2</th>
          <th>Company3</th>
          <th>Contact3</th>
          <th>Country3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Alfreds Futterkiste</td>
          <td>Maria Anders</td>
          <td>Germany</td>
          <td>Alfreds Futterkiste</td>
          <td>Maria Anders</td>
          <td>Germany</td>
          <td>Alfreds Futterkiste</td>
          <td>Maria Anders</td>
          <td>Germany</td>
        </tr>
        <tr>
          <td>Centro comercial Moctezuma</td>
          <td>Francisco Chang</td>
          <td>Mexico</td>
          <td>Centro comercial Moctezuma</td>
          <td>Francisco Chang</td>
          <td>Mexico</td>
          <td>Centro comercial Moctezuma</td>
          <td>Francisco Chang</td>
          <td>Mexico</td>
        </tr>
        <tr>
          <td>Ernst Handel</td>
          <td>Roland Mendel</td>
          <td>Austria</td>
          <td>Ernst Handel</td>
          <td>Roland Mendel</td>
          <td>Austria</td>
          <td>Ernst Handel</td>
          <td>Roland Mendel</td>
          <td>Austria</td>
        </tr>
        <tr>
          <td>Island Trading</td>
          <td>Helen Bennett</td>
          <td>UK</td>
          <td>Island Trading</td>
          <td>Helen Bennett</td>
          <td>UK</td>
          <td>Island Trading</td>
          <td>Helen Bennett</td>
          <td>UK</td>
        </tr>
        <tr>
          <td>Laughing Bacchus Winecellars</td>
          <td>Yoshi Tannamuri</td>
          <td>Canada</td>
          <td>Laughing Bacchus Winecellars</td>
          <td>Yoshi Tannamuri</td>
          <td>Canada</td>
          <td>Laughing Bacchus Winecellars</td>
          <td>Yoshi Tannamuri</td>
          <td>Canada</td>
        </tr>
        <tr>
          <td>Magazzini Alimentari Riuniti</td>
          <td>Giovanni Rovelli</td>
          <td>Italy</td>
          <td>Magazzini Alimentari Riuniti</td>
          <td>Giovanni Rovelli</td>
          <td>Italy</td>
          <td>Magazzini Alimentari Riuniti</td>
          <td>Giovanni Rovelli</td>
          <td>Italy</td>
        </tr>
      </tbody>
    </table>
    <footer>This is footer</footer>
  </section>
</main>

Html相关问答推荐

restrict. form—text width to input s width'

D3.js—分组条形图—更新输入数据时出错

如何获得一个背景图像，不是模糊的内部容器，但模糊的外部'

CSS：显示块，第一个项目没有正确对齐

如何通过扭曲元素来倾斜元素？

仅在加载视频时显示描述(<；Video>；标签)

按钮之间的HTML文本居中不正确

穿过整个屏幕的旋转线

如何在VB.NET中用打印预览和直接打印的方式在Html中打印数据表的内容，包括页眉/设置纸张/方向/适合页面/总计

Chatbox底部显示新消息，并向上推送旧消息

如何在黑暗模式切换中添加图标

如何从 div 内的属性中提取 href 和文本

如何使用 CSS 应用带有笔划的文本阴影？

如何垂直对齐列表中的图像和文本？

如何让一个 div 元素粘在另一个元素上？

为什么 text-align 应用于 span 而不是 CSS 中的 img

如何使用 CSS 使粘性元素固定在视口顶部

变换元素以适应高度(Angular，SCSS)

弹出窗口溢出溢出：自动，我不明白为什么

列宽等于最宽列宽度的无界容器

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  chrome插件网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  豪评测 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630