html - 具有最大高度的 div 内的表格-6ren

html - 具有最大高度的 div 内的表格

转载作者：搜寻专家更新时间：2023-10-31 08:21:33

25

4

我想要一个可滚动的表格。为此，我包装了一个 <table>进入<div>用max-height和 overflow: auto .此外，<div>有display: inline-block以确保 div 调整其宽度以适应基础表格。

<html>
<head>
    <title>Test</title>
    <style type="text/css">
        div { max-height: 100px; display: inline-block;
              overflow: auto; border: 1px solid red; }
        td { border-bottom: 1px solid black; }
    </style>
</head>
<body>
    <div>
        <table>
            <tr><td>bla bla bla bla bla</td></tr>
            <tr><td>bla bla bla bla bla</td></tr>
            <tr><td>bla bla bla bla bla</td></tr>
            <tr><td>bla bla bla bla bla</td></tr>
            <tr><td>bla bla bla bla bla</td></tr>
            <tr><td>bla bla bla bla bla</td></tr>
            <tr><td>bla bla bla bla bla</td></tr>
        </table>
    </div>
</body>
</html>

在大多数浏览器(Firefox、Safari、Chrome)中，这会导致一个问题:如果表格长于 100 像素，则添加垂直滚动条而不会使 div 变宽，从而导致文本换行:

Firefox screenshot

在 IE 中它看起来“正确”:

IE screenshot

有办法解决这个问题吗？

最佳答案

http://jsfiddle.net/3VSZE/44/

所以发生的事情是在滚动条呈现之前，它正在设置表格的宽度 == 包含的 div 的宽度。因此，为了便于对话，假设 div 的宽度为 100px，滚动条的宽度为 10px，内表的宽度为 100px。当浏览器试图呈现 div 时，它假定总宽度为 100px。然后它以愉快的方式呈现 div 的内容。然后添加滚动条，div 的内容现在总宽度为 110px(表格 + 滚动条)，但 div 的宽度仍然是 100px。所以基本上，浏览器试图在 100 像素的容器内渲染 110 像素，导致您看到的换行。

这就是为什么添加第二个 div，然后为该 div 留出边距以便滚动条适合的原因。我在 IE8 中试了一下，它并没有增加额外的空间(就像我最初认为的那样)。值得注意的是，当您在兼容模式下执行此操作时，div 会占据页面的整个宽度。这发生在我的例子中，也发生在你的例子中。我不知道如何解决这个问题；但这不是这个问题的主题。我没有时间试一试 IE7。

这有点简洁，而且当其中一行的内容更宽时它也能工作:

http://jsfiddle.net/3VSZE/75/

<html>
<head>
    <title>Test</title>
    <style type="text/css">
        .a { border: 1px solid red; display: inline-block; }
        .b { width: 100%; overflow: auto; max-height:100px; margin-right: 18px; }
        td { border-bottom: 1px solid black; }
    </style>
</head>
<body>
    <div class="a">
        <div class="b">
            <table>
                <tr><td>bla bla bla bla bla</td></tr>
                <tr><td>bla bla bla bla bla</td></tr>
                <tr><td>bla bla bla bla bla</td></tr>
                <tr><td>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</td></tr>
                <tr><td>bla bla bla bla bla</td></tr>
                <tr><td>bla bla bla bla bla</td></tr>
                <tr><td>bla bla bla bla bla</td></tr>
            </table>
        </div>
    </div>
</body>
</html>

关于html - 具有最大高度的 div 内的表格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7122991/

25

4

0

文章推荐： java - 为什么不卸载类加载器就不能卸载类？

文章推荐： iOS - setObject 与同步

文章推荐： java - 帮助在 java 中制作密码检查器

文章推荐： java - 一组整数按大小升序排列的 k 种组合

Haskell - 如何将最大值 (xs++ map (x+) xs) 转换为 max (最大 xs) (x + 最大 xs)
“用 Haskell 进行函数式思考”中的练习之一是使用融合定律使程序更加高效。我在尝试复制答案时遇到了一些麻烦。部分计算要求您将 maximum (xs++ map (x+) xs) 转换为 ma
R 最大/最小可表示数
我正在尝试获得 R 中最大/最小的可表示数字。输入“.Machine”后我有: $double.xmin [1] 2.225074e-308 $double.xmax [1] 1.797693e+
javascript - 浏览器验证消息最小/最大
有没有办法更改浏览器验证消息请检查所附图片。我目前正在使用 wooCommerce 目前它显示小于或等于 X 个数字，我想更改为请求超过 X 个项目的报价。请多多指教最佳答案您需要使用oni
R - 优化(最大)
我正在尝试将解决方案从 Excel 求解器复制到 R 中，但不知道从哪里开始。问题: 每小时选择 5 个选项(5 行)，以最大化“分数”的总和，而无需在多个小时内选择同一组 2 次。换句话说: 最
Haskell:最大/最小函数
Haskell 中是否有这样的功能: max_of_type :: (Num a) => a 所以: max_of_type :: Int == 2 ^ 31 - 1 // for example,
javascript - 控制输入数字字段最小/最大
我有这两个表示时间范围(秒)的输入字段，我需要这样设置，以便“from/min”字段不能高于“to/max”，反之亦然。到目前为止我得到了这个: jQuery(document).ready(fun
MySQL-获取一系列行中连续事件的最小/最大
我有一个看起来像这样的表: http://sqlfiddle.com/#!9/152d2/1/0 CREATE TABLE Table1 ( id int, value decimal(10,
mysql - 从多个项目中选择最小/最大
我会尝试尽可能简单地解释它: 首先是一些带有虚拟数据的数据库结构。结构 tb_spec_fk feature value ----------------- 1 1 1
mysql - 一对多加入聚合函数(最大)
我有两个表。表 1: +---------+---------+ | Lead_ID | Deal_ID | +---------+---------+ | 2323 | null |
MySQL - 最小/最大
我的数据库中有一个字段可以包含数字，例如8.00 或范围编号，例如8.00 - 10.00。如果您将每个数字作为单独的数字，我需要从表中获取 MIN() 和 MAX()。例如当范围为 8.00 -
Python:最大/最小内置函数取决于参数顺序
max(float('nan'), 1) 计算结果为 nan max(1, float('nan')) 计算结果为 1 这是预期的行为吗？感谢您的回答。 max 在 iterable 为空时引发异常
html - 最大/最小宽度使用最大可能宽度
我想问一下如何在 CSS 中创建一个页脚栏，它具有最小宽度(比如 650 像素)，并且会根据窗口大小进行拉伸(stretch)，但仅限于某个点(比如 1024 像素)。我的意思是当窗口大小为例如 1
css - 最大/最小宽度属性不适用于目标列
我尝试调整表格列宽(下一个链接上的“作者”列 http://deploy.jtalks.org/jcommune/branches/1?lang=en)。我已将最小/最大属性添加到 .author-c
c# - 最大/最小对象
在 C# 中，是否有用于将最小值和最大值存储为 double 值的内置类？此处列出的要点 http://msdn.microsoft.com/en-us/library/system.windows
python - 最大 GAE任务队列处理率
问题: 每个任务队列是否可以每秒处理超过 500 个任务？每个 GAE 应用是否可以每秒处理超过 50,000 个任务？详细信息: Task queue quota文档说: Push Queue
java - 最大/最小堆树可以包含重复值吗？
我想知道是否允许最大或最小堆树具有重复值？我试图仅通过在线资源查找与此相关的信息，但一直没有成功。最佳答案是的，他们可以。您可以在“算法简介”(Charles E. Leiserson、Cliff
powershell 最大/第一个/聚合函数
首先，我是 .NET 开发人员，喜欢 C# 中的 LINQ 和扩展方法。但是当我编写脚本时，我需要相当于 Enumerable extension methods 的东西任何人都可以给我任何建议/
c++ - 最大 malloc 大小低于预期
这是一个检查最大 malloc 大小的简单程序: #include std::size_t maxDataSize = 2097152000; //2000mb void MallocTest(vo
awk - 我的第一个脚本中的语法错误。(最小，最大)
我想找到我的数据的最小值和最大值。我的数据文件: 1 2 4 5 -3 -13 112 -3 55 42 42 而我的脚本: {min=max=$1} {if ($1max) {max=$1}
php - 如何为ElasticSearch聚合添加条件(最小/最大)？
我想查询我的Elastic-Search以获取仅具有正值的最低价格价格。我的价格也可以为零和-1；所以我不希望我的最小聚合返回0或-1。我知道我应该向查询(或过滤器)添加脚本，但是我不知道如何。我当前

首页

博学

6Ren·AI

商城

html - 具有最大高度的 div 内的表格