html - 带有 float 和动态边的 Bootstrap 表格单元格-6ren

html - 带有 float 和动态边的 Bootstrap 表格单元格

转载作者：太空宇宙更新时间：2023-11-04 09:46:18

过去几天我一直在努力让我的 Bootstrap 表看起来像我想要的那样。

我只是无法让它工作。

我想要的是第一个 td 必须是动态宽度，具有最大宽度和最小宽度，因为值介于 1 和 9999 之间。数字必须右对齐。减号按钮应左对齐。所有这些都必须在同一条线上。

中间的单元格也必须有动态宽度。但是 text-overflow: ellipsis; 我也开始工作了。最后一个 td 具有固定宽度。

这是我想要的一些示例。

第一个 td 的动态侧和第二个 td 的折叠: dynamic side of first td collapsing in second td

我试过很多东西。例如。我试图用单元格末尾的减号按钮制作一个固定宽度的“clearfix”。仅当单元格中的值为 9999 而不是 1 时才有效。

这是它现在的样子: screenshot now

这里有一个例子:http://www.bootply.com/jNx2MJrNG0

代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        .cartTable thead {
            color: #333;
            background-color: #f5f5f5;
            border-color: #ddd;
        }

        .cartTable th {
            border-bottom: 1px solid #ddd;
            font-weight: normal;
        }

        .cartTable > tbody > tr > td {
            vertical-align: middle;
            font-size: 18px;
            font-weight: bold;
        }

        .cartTable th:first-child,
        .cartTable td:first-child {
            padding-left: 15px;
        }

        .cartTable .quantityColumn {
            white-space: nowrap;
            width: 10px;
            min-width: 59px;
            max-width: 114px;
            text-align: right;
            padding: 8px 0;
        }
        /*.minusDiv {
            clear: both;
        }*/
        .quantityColumn .minusToLeft {
            /*display: inline-block;*/
            /*text-align: right;*/
            float: left;
        }

        .minusToRight {
            width: 40px;
            display: inline-block;
            clear: both;
        }

        .quantityColumn .btnMinus {
            margin-left: 0;
            margin-right: 5px;
        }

        .quantityColumn .btnPlus {
            margin-left: 5px;
        }

        .quantityColumnDiv {
            min-width: 59px;
            max-width: 114px;
        }

        .cartTable .nameColumn {
            max-width: 80px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .cartTable .btnColumn {
            width: 105px;
            padding-left: 0;
            padding-right: 15px;
            /*text-align: right;*/
        }

        @media (max-width:767px) {
            .cartTable .quantityColumn {
                padding: 8px;
            }

            .cartTable .btnColumn {
                width: 50px;
            }
        }

        .btnSearch {
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-12 col-md-6">
                <div class="panel panel-default">
                    <table class="table cartTable">
                        <thead>
                            <tr>
                                <th>Quantity</th>
                                <th>Product</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="quantityColumn">
                                    <span class="minusToLeft">
                                        <button type="button" class="btn btn-danger btn-xs hidden-xs btnMinus">
                                            <span class="glyphicon glyphicon-minus"></span>
                                        </button>
                                    </span>
                                    1
                                    <button type="button" class="btn btn-success btn-xs hidden-xs btnPlus">
                                        <span class="glyphicon glyphicon-plus"></span>
                                    </button>
                                </td>
                                <td class="nameColumn">ALongTextToCollaps</td>
                                <td class="btnColumn">
                                    <button type="button" class="btn btn-info btnSearch">
                                        <span class="glyphicon glyphicon-search"></span>
                                    </button>
                                    <button type="button" class="btn btn-danger">
                                        <span class="glyphicon glyphicon-trash"></span>
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td class="quantityColumn">

                                    <span class="minusToLeft">
                                        <button type="button" class="btn btn-danger btn-xs hidden-xs btnMinus">
                                            <span class="glyphicon glyphicon-minus"></span>
                                        </button>
                                    </span>

                                    9999
                                    <button type="button" class="btn btn-success btn-xs hidden-xs btnPlus">
                                        <span class="glyphicon glyphicon-plus"></span>
                                    </button>

                                </td>
                                <td class="nameColumn">test cake</td>
                                <td class="btnColumn">
                                    <button type="button" class="btn btn-info btnSearch">
                                        <span class="glyphicon glyphicon-search"></span>
                                    </button>
                                    <button type="button" class="btn btn-danger">
                                        <span class="glyphicon glyphicon-trash"></span>
                                    </button>
                                </td>
                            </tr>

                        </tbody>
                    </table>
                </div>
            </div>

        </div>
    </div>
</body>
</html>

我如何让第一个 td 的内容保持在同一行上，减号按钮向左，这样数字就彼此右对齐并且列的宽度仍然是动态的？

最佳答案

你有两个选择:

将 .cartTable quantityColumn 中的 width 增加到 120px(或者只是将其调整为数量列的最大尺寸)以给它更多空间
我更喜欢有另外两列，一列用于-，一列用于+

关于html - 带有 float 和动态边的 Bootstrap 表格单元格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39466189/

文章推荐： linux - 删除被空行包围的行

文章推荐： linux - 从 GitHub 上的源代码安装 FontForge

文章推荐： Java从字符串解析为数字但推断类型

ruby - 如何要求正确版本的测试/单元
我试图要求 test/unit 的新版本(即不是与 ruby 捆绑的版本) .根据 instructions我用 gem i test-unit 安装它.但是现在当我需要 test/unit我似乎
Systemd 单元，使用外部脚本检查状态
简短版本是: 我有一个 systemd 单元，我想在调用时检查脚本的返回代码: systemctl status service.service 长版本:我有一个 lsb init 脚本正是这样做的，
c# - 单元/集成测试中的反射问题
我正在使用反射动态创建一个类的实例，这工作正常，除非尝试通过单元测试执行此操作 - 我使用的是 MS 测试框架。我收到熟悉的错误:“无法加载文件或程序集‘Assy’或其依赖项之一。系统找不到指定的文
javascript - (单元)测试网站界面的方法
我想知道测试网站“界面功能”的最佳实践是什么。我对哪些方法可用于测试界面和动态生成的内容感兴趣。特别是，我很难弄清楚是否可以为需要用户交互的操作创建自动化测试，或者这是否只是浪费时间，我应该让一些
python - (单元)测试python信号处理程序
我有一个简单的 Python 服务，其中有一个无限执行某些操作的循环。在各种信号上，sys.exit(0) 被调用，这导致 SystemExit 被引发，然后如果可以的话应该进行一些清理。在测试中，
c# - HoughLinesP参数!单元？
我正在使用 OpenCV 2.4.2 这是 OpenCV 文档中的引文 C++: void HoughLinesP(InputArray image, OutputArray lines, doubl
c# - 单元/集成测试和恢复数据库
忙于 C# 中的自动化测试用例，我们需要在每次测试后恢复数据库快照。问题是，当运行多个测试时它会失败，因为“其他用户正在使用数据库时无法更改数据库状态。” 我们使用 SqlConnection.Cle
C# 单元(文件范围)命名空间
我阅读了 C# 规范并用谷歌搜索了它，但一无所获。我 99% 肯定 C# 中没有像单元命名空间指令这样的功能，但问题是:为什么？是否有惯用或技术原因？这很方便，尤其是当我们的大部分文件都由单个命名
ios - iOS 单元/应用程序测试目标如何与其宿主应用程序中的类进行链接？
我目前正在尝试向我的应用程序(一个非常老的项目......评论说 iOS 2.0)添加单元测试(精确的应用程序测试)并且总是偶然发现 undefined symbols for architectur
delphi - 如何向项目添加新的(自制)单元
我正在使用Delphi 7，并且有一个新单元要在我的项目中使用。我已经编译了新的。当我尝试通过将其添加到uses子句在项目中使用此单元时，出现错误，提示未找到.dcu文件。我还尝试将文件的完整路径放在
unit-testing - 单元/集成测试nHibenrate查询
场景：我需要编写一个复杂的nHibernate查询，该查询将返回预计的DTO，但是我想使用TDD方法。该方法如下所示： public PrintDTO GetUsersForPrinting(int
slideshow - 以幻灯片模式运行 Jupyter 单元
您可以通过运行以下命令在事件 html 设置中显示 Jupyter 笔记本: $ jupyter nbconvert untitled.ipynb --to slides --post serve 有
adsense - 如何在一个页面上使用多个 AdSense 单元？
如何在一个网站上拥有多个 AdSense 单元？ Google 提供的唯一代码是按单位计算的。 (adsbygoogle = window.adsbygoogle || []).push({})
unit-testing - 单元/集成测试中文件系统依赖关系的最佳实践
我刚刚开始为大量代码编写测试。有很多类依赖于文件系统，即读取 CSV 文件、读/写配置文件等。当前测试文件存储在项目(这是一个 Maven2 项目)的 test 目录中，但由于多种原因该目录并不总是
unit-testing - (单元)测试驱动开发
我对 TDD 还很陌生，在单元测试方面也不是很老练，所以才有这个问题。我有这个用 PHP 编写的遗留函数 function foo(){ x = bar(); y = baz();
java - 垂直排列 JCheckBox 单元
我创建了一个程序，在 Swing 窗口的一侧显示结果过滤选项，但默认情况下它们水平相邻显示，这浪费了我在 BorderLayout 的西侧分配的空间。我可以在构造函数或添加语句中传递任何内容来将它们堆
c# - 如何(单元)测试弱引用列表的内存管理功能？
标题不好的借口:如果有人能更好地描述它，请做。我有一个 WeakList类，它“基本上”是一个 List> (虽然不是字面意义上的派生自列表，但它应该对用户完全透明)。现在的基本思想是“如果引用的
ios - 如何继续添加多个原型(prototype)单元
我正在尝试在 UITableView 上添加两个原型(prototype)单元。但是，我不知道如何验证是否能够为每个原型(prototype)“返回”正确的单元格。你们能帮我一下吗？ func ta
swift - 如何重新加载经过编辑的更改的 CloudKit 单元
我正在使用 CloudKit 作为数据库创建一个简单的待办事项列表应用程序。目前我可以添加和删除对象，但对编辑对象感到困惑。编辑项目 Controller protocol EditItemCont
python - 涉及序列的任务需要多少个 RNN 单元？
我正在针对以下任务训练 RNN:给定一个包含 30 个单词的序列，然后将该序列分类为二进制类。在我的网络中拥有超过 30 个单元(LSTM、GRU 或普通 RNN)有好处吗？我在网上看到过很多例子，

太空宇宙

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 带有 float 和动态边的 Bootstrap 表格单元格