使表格行的背景延伸到表格边界之外

2024-04-03

我目前正在尝试创建一个带有斑马条纹的表格,其中条纹的背景颜色延伸到屏幕的整个长度,但行的实际内容保留在表格的边界内。

更具体地说,我正在使用 Bootstrap,所以我想要的是表行的内容就像它们位于.container.

本质上,我正在尝试创建一个如下所示的表:

<table class="table">
    <tr>
        <div class="container">
            <td>Testing</td>
            <td>Testing</td>
        </div>
    </tr>
    <tr>
        <div class="container">
            <td>Testing</td>
            <td>Testing</td>
        </div>
    </tr>
</table>

...

table, tr {
    width: 100%;
}

tr:nth-child(odd) {
    background-color: #f4f4b4;
}

理想情况下,背景颜色应延伸浏览器窗口的整个长度,但表格的内容应具有居中且固定(尽管会响应变化)的宽度。

然而,这实际上不起作用,因为它是不可能 http://css-tricks.com/using-divs-inside-tables/放置一个div里面一个tr元素。

这是我解决问题的最佳尝试:http://jsfiddle.net/4L4tatk5/3/ http://jsfiddle.net/4L4tatk5/3/

它很接近,但不太有效,因为表中的单元格(以蓝色概述)没有对齐到整齐的列中。我尝试尝试修补不同的display选项tr元素,但除此之外的任何东西display: block会导致.container类实际上被忽略。

解决这个问题的最佳方法是什么?


该代码可在jsfiddle http://jsfiddle.net/4L4tatk5/3/,但作为参考,这是我的 HTML 和 CSS:

HTML

<div class="container control">
    <p>
        This is an example container (outlined in red) to show where the 
        contents of the table should be aligned to. Individual cells are 
        outlined in blue.
    </p>
    <p>
        Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem 
        ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
        lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem 
        ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
        lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem 
        ipsum lorem ipsum lorem ipsum
    </p>
</div>
<table class="table test">
    <thead>
        <tr class="container">
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody>
        <tr class="container">
            <td>abcdefghijklmnop</td>
            <td>123456789</td>
            <td>foo</td>
        </tr>
    </tbody>
    <tbody>
        <tr class="container">
            <td>kidke,fjgisklmpi</td>
            <td>11</td>
            <td>bar</td>
        </tr>
    </tbody>
    <tbody>
        <tr class="container">
            <td>abcd</td>
            <td>2321</td>
            <td>hello</td>
        </tr>
    </tbody>
    <tbody>
        <tr class="container">
            <td>adsfaldfalke</td>
            <td>0</td>
            <td>world</td>
        </tr>
    </tbody>
</table>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

.control {
    border: 1px solid red;
    margin-bottom: 2em;
}

.test {
    overflow-x: auto;
    margin-bottom: 1em;
}

.test thead {
    white-space: nowrap;
    background-color: #e2e7e8;
}

.test table {
    width: 100%;
}

.test thead,
.test tbody,
.test tfoot {
    width: 100%;
}

.test tbody:nth-child(odd) {
    background-color: #f4f4b4;
}

.test tr {
    display: block;
    border: 1px solid red;
}

.test th,
.test td {
    border: 1px solid blue;
}

我不认为container类应该在表内使用。我会把整个桌子放在一个.container并使用伪元素延长条纹。使用默认的table-striped从 bootstrap 来看,它看起来像这样:

.table-striped td:first-child,
.table-striped th:first-child,
.table-striped td:last-child,
.table-striped th:last-child {
   position: relative;
}

.table-striped td:first-child:before,
.table-striped th:first-child:before,
.table-striped td:last-child:after,
.table-striped th:last-child:after {
    content: '';
    position: absolute;
    top: -1px;
    bottom: -2px;
    width: 100vw;
    display: block;
    background: inherit;
    border: inherit;
}
.table-striped td:first-child:before,
.table-striped th:first-child:before {
    right: 100%;
}
.table-striped td:last-child:after,
.table-striped th:last-child:after {
    left: 100%
}

和更新的小提琴:http://jsfiddle.net/4L4tatk5/8/ http://jsfiddle.net/4L4tatk5/8/

请注意,您可能需要更改它100vw(=垂直宽度的100%)到其他一些单位(只是一个高得离谱的9999px或其他)如果您需要支持

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使表格行的背景延伸到表格边界之外 的相关文章

  • JavaScript 跨浏览器单击 HTML DOM 元素

    是否有可用的普通 JavaScript 跨浏览器函数能够触发 HTML DOM 元素 包括 div 等非表单元素 上的单击事件 大多数走这条路的人要么最终开发自己的事件管理系统 这并不难 但很烦人 要么在可用的功能范围内工作 如果所有浏览器
  • CSS:多属性选择器

    我想设置 电子邮件 和 密码 类型的表单输入样式 但不设置其他任何样式 我正在想象类似以下的事情 input type email type password 然而 属性选择器的工作方式似乎将其解释为 输入 其中类型同时是 电子邮件 and
  • 当 MediaElementAudioSource 输出为零但 CORS 不再是问题时,如何才能播放音频?

    我正在尝试实施
  • 没有嵌套容器的桌面和移动 Flexbox 布局

    我有 3 个 div 它们必须按移动布局的特定顺序排列 但我必须将第 2 个 div 作为桌面布局的侧边栏 所以对于移动设备 分区1 分区2 分区3 对于桌面 分区1 div2 分区3 在桌面布局中 div 2 有阴影背景 因此必须是父级的
  • 输入和文本字段中的背景颜色

    我想更改表单文本和输入字段中的颜色背景 但是当我这样做时 它也会影响提交按钮 是否可以通过其他不影响按钮的方式来完成 我用过这段代码 input textarea background color d1d1d1 input type tex
  • CSS 中 calc() 的结果是什么

    我们现在已经开始使用calc 在CSS中 用于设置计算结果的宽度 例如 div div div div parent width 100px calcWidth width calc 100 3px height 100px backgro
  • 在打印 CSS 上在每个页面周围绘制边框?

    打印时我需要在每个页面周围绘制边框 我最初是使用带有分页符的 div 来完成此操作 例如 media print contentContainer position inline height 98 width 100 top 0px le
  • JQuery 可滚动文本

    我正在寻找一个 jquery 插件 它将在可滚动框中绑定文本 大多数滚动插件都会转换浏览器滚动条 但我想保持它的原样和可用 这只是为了在较小的空间内包含大量的文本 就像这样page http www class pm files jquer
  • 显示带有背景颜色的百分比条

    例如 如果我有一个包含两列和 2 行的表 Col1 Percentage 50 50 70 70 如何用代表 COl1 值的颜色填充百分比列 像这样的东西 您可以使用具有两个紧接着的停止点的线性渐变 percentageFill heigh
  • 仅水平 CSS 视差效果,层数大于 100vw

    如何用水平引导网站仅 CSS 视差效果 要求 仅 CSS 视差 父层必须具有宽度 高度 100vw 100vh 子层的宽度 高度必须 gt 100vw 100vh child layers must visually align 100 w
  • 如何检查元素的内容是否为空,如果是,则在 jquery 中删除该元素

    我目前正在尝试选择某个 div 内没有内容的任何 h2 元素并将其删除 这是我的 html 代码 div class skipToContainer h2 class vidSkipTo Hello h2 h2 class vidSkipT
  • 使用溢出时无法隐藏滚动条:auto

    我有这个CSS div background color red position relative height 414px overflow auto width 902px margin 0px auto 我尝试过overflow y
  • Symfony 2 使用 CSS 设置背景图片

    I want to put a background image for a menu in symfony But I can t figure out how to do it I managed to style a lot of t
  • 如何将当前元素传递给 Knockout.js 绑定中的 Javascript 函数?

    因此 我尝试根据是否选中子复选框 使用 Knockout js 将类添加到元素 为此 我试图通过this作为我的函数的参数 目前 我的精简 DOM 结构如下 tr td td tr
  • HTML 和 JavaScript - 将滚动操作从一个元素传递到另一个元素

    假设我有两个 div div div div A scrollable list div 我想让它当光标停在里面时 control并且鼠标滚轮滚动 view将会滚动 无论如何要实现这一目标 好的 快速修复对我有用 即使固定 div 不可滚动
  • xpath:选择中断标签之前和之后的文本节点

    考虑以下因素 混合 br and br text1 br text2 br text3 br text4 br text5 如何找到每个文本节点 我正在考虑符合 br 标签之前或之后的条件的东西 但不确定是否 br and br 在 xpa
  • 显示班级图片 10 秒

    我有下面给出的代码显示9 boxes 其值如下digital time 还有一个班级box002显示digits相当于随机选择的九个盒子的值 box002 can be dragged to digital time starting wi
  • 如何设置旋转元素背面的样式?

    我有一个figure它是可旋转的 通过用户输入任意角度 该旋转明显地使用transition财产 当该元件旋转超过 90 度 90 度时 元件的背面可见 我想对元素的通常隐藏的一面进行与正面不同的设计 但我不确定如何实现这一点 figure
  • 响应式导航栏隐藏其下方的元素

    我创建了一个响应式导航栏 但它使下面的元素 Flexslider 插件 消失 在我制作导航栏之前 下面的 Flexslider 可以正常显示 但现在不行 导航栏的 z index 为 2 所以我不知道问题是什么 我应该如何 更改什么才能允许
  • 跨浏览器:禁用输入字段的不同行为(文本可以/不能复制)

    我有一个被禁用的输入 html 字段 在某些浏览器 Chrome Edge Internet Explorer 和 Opera 中可以选择并复制文本 但至少在 Firefox 中这是不可能的 您可以通过在不同浏览器中执行以下代码来测试

随机推荐

  • 错误:我们没有使用 Azure CLI 的有效访问权限

    我是 Azure CLI 的新用户 所以 我昨天开始使用它 一切正常 直到我在控制台上收到一条消息 要求我使用 Azure 登录命令再次登录 我按照消息所说的做了 打开我的浏览器并输入代码 浏览器加载页面 一切正常 但是 当我进入控制台窗口
  • 如何在 Maven 中创建校验和然后将其输出到文本文件?

    还在学习如何使用Maven 我想知道是否有办法做到checksum在生成的WAR file The Maven目标是package 我想要实现的是得到一个checksum价值 包装的WAR文件 与打包文件一起放入文本文件中 提前致谢 让它与
  • 当我移动轨迹栏时,如何防止 Windows 通用控件 6.0 中的控件(选项卡)闪烁和消失?

    滑动滑动条并释放鼠标按钮时 整个窗口都会闪烁 并且选项卡会消失 当我使用旧版本时 一切正常 当我使用新的 Microsoft Windows Common Controls ver 6 0 时 出现此问题 include
  • Flink 检查点到 Google Cloud Storage

    我正在尝试为 GCS 中的 flink 作业配置检查点 如果我在本地运行测试作业 没有 docker 和任何集群设置 一切正常 但如果我使用 docker compose 或集群设置运行它并在 flink 仪表板中使用作业部署 fat ja
  • Android 中的文本转语音完成后立即播放音频文件

    我正在尝试开发一个 Android 应用程序 一旦文本到语音完成 就必须播放音频文件 这个怎么做 如果我没有理解错的话 您想使用文本转语音来读取一些文本 同时将语音音频存储到手机中 然后再播放音频 你检查过吗录音测试 http develo
  • Mesos 任务 - 无法接受套接字:未来已丢弃

    我只是想将 mesos 版本从 1 0 3 升级到 1 3 1 Chronos 调度程序能够通过 mesos 调度作业 该作业运行良好并且能够查看 mesos 标准输出日志 但是 仍然在 mesos stderr 日志中看到以下内容 doc
  • 使用 MySQL 进行 SVN 身份验证

    我正在尝试通过 MySQL 设置每个存储库 SVN 身份验证 但遇到一些问题 首先 两者有什么区别mod authn dbd and mod auth mysql 其次 我已经有一个 MySQL 数据库设置 其中包含用户 组和权限的表 是否
  • 如何从 Amplify 生成的 Lambda 函数中访问其他 AWS 资源?

    我一直在使用 AWS Amplify 作为 AWS 的新手 我非常喜欢 Amplify 如何在 AWS 上为我配置必要的资源和 IAM 角色 我的问题是关于将 Lambda 与 GraphQL 结合使用 按照文档 我可以创建一个自定义 Gr
  • 可以使用反射覆盖 IEnumerable 中的项目吗?

    不顾任何合理的理由这样做 只是出于好奇是否可以获取任何给定的 IEnumerable T 并覆盖其中包含的项目 例如 给定 IEnuemrable String 是否可以完全替换 IEnumerable 中的所有字符串 正如其他人所说 如果
  • 背景尺寸:包含

    我想要一个带有背景图像的 div 保持图像的纵横比 固定高度为 500px 并且我不希望该 div 的背景上有 填充 这可以吗 我可以获得一个具有固定高度和保持宽高比的背景图像的 div div style background url s
  • 如何使用 Google 字体更改 Bootstrap 默认字体系列?

    我正在创建一个博客网站 我想更改 Bootstrap 字体 在 header 中的 import CSS 中我添加了这个字体 如何使用它作为我的引导程序默认字体 首先 你不能通过这种方式将字体导入到 CSS 中 您可以在 HTML 头中添加
  • Swift 中的元组是否可以完全替代 C# 中的匿名类型

    Like C 中的匿名类型 http msdn microsoft com en us library bb397696 aspx 新推出的语言 Swift 中的元组可以做 C 中的匿名类型可以做的事情吗 在学习 swift 时 我发现了一
  • 如何打开图像并在其上绘图

    我正在创建一个应用程序 人们可以在其中绘制草图并保存到图库中 这我已经完成并且运行良好 我希望能够从画廊中获取一张图像并能够在其上进行绘制 我已经能够打开图库来选择图像 但我无法弄清楚如何将该图像嵌入到画布上然后进行绘制 但问题是 它打开了
  • 存储过程返回 int 而不是结果集

    我有一个包含动态选择的存储过程 像这样的事情 ALTER PROCEDURE dbo usp GetTestRecords p1 int 0 p2 int 0 groupId nvarchar 10 0 AS BEGIN SET NOCOU
  • ES6 类中的 ES6 函数、箭头函数和“this”[重复]

    这个问题在这里已经有答案了 class App extends Component constructor props onChange e gt this setState term e target value onSubmit e e
  • CouchDB 和 Couchbase 有什么区别?

    之间有什么本质区别吗CouchDB http couchdb apache org and 沙发底座 http www couchbase com 我认为CouchDB和Couchbase Server之间有一些本质的区别需要指出 我不会写
  • 在自定义大小的浏览器窗口中使用批处理文件打开链接

    我想创建一个批处理文件 它将打开一个应用程序和一个链接 我们的想法是在桌面上的快捷方式文件中使用此批处理文件 以便一键单击应用程序和 URL 链接示例 www google com 应打开 但浏览器大小应自定义 例如 600 600 请建议
  • Spark中saveAsTextFile时如何命名文件?

    在 Spark 版本 1 5 1 中另存为文本文件时 我使用 rdd saveAsTextFile
  • 使用Robolectric时如何加载.so?

    W 环境 EXTERNAL STORAGE 未定义 回到默认状态 java lang UnsatisfiedLinkError com autonavi amap mapcore MapCore nativeNewInstance Ljav
  • 使表格行的背景延伸到表格边界之外

    我目前正在尝试创建一个带有斑马条纹的表格 其中条纹的背景颜色延伸到屏幕的整个长度 但行的实际内容保留在表格的边界内 更具体地说 我正在使用 Bootstrap 所以我想要的是表行的内容就像它们位于 container 本质上 我正在尝试创建