div表格中的单元格间距

2024-05-03

我希望每个单元之间有 4 个左右的像素空间。我希望灰色标题有空格而不是一块灰色。我尝试尝试(background-clip:padding-box;padding:14px;margin等),但无法弄清楚如何在div表中的单元格之间放置一些像素。我该怎么做呢?

问题演示http://jsfiddle.net/EJBnm/ http://jsfiddle.net/EJBnm/

<div class="TableBox">
    <div>
        <div>Head</div> <div>Bigger Head</div> <div>Medium</div>
    </div>
    <div>
        <div>First</div> <div>Second</div> <div>Third</div>
    </div>
    <div>
        <div>First</div> <div>Second</div> <div>Third</div>
    </div>
    <div>
        <div>First</div> <div>Second</div> <div>Third</div>
    </div>
</div>

CSS:

.TableBox {display: table;}
.TableBox > div {display: table-row; border-spacing: 5px}
.TableBox > div >div {display: table-cell;  margin: 4px;}
.TableBox > div:nth-child(even){ color: red; }
.TableBox > div:nth-child(1){  background-color: #666666; color:white; border-spacing: 15px; background-clip:padding-box; padding: 14px; margin:0 20px}

Add border-spacing: 4px;给你的.TableBox类而不是你的<tr>

Fiddle: http://jsfiddle.net/EJBnm/1/ http://jsfiddle.net/EJBnm/1/

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

div表格中的单元格间距 的相关文章

  • 如何从 bootstrap-markdown.js 调用 .getContent 和 .parseContent

    我是使用 Bootstrap 插件的新手 刚刚通过代码学院 http www codecademy com en skills make an interactive website 我真的很想用这个很棒的引导 Markdown 插件 ht
  • 从 html 属性中删除单引号和双引号,并且除 href 和 src 之外的所有属性上都没有空格

    我正在尝试从 html 属性中删除单引号和双引号 这些属性是没有空格的单个单词 我写了这个有效的正则表达式 type title data toggle colspan scope role media name rel id class
  • HTML5

    我想在随机位置开始和停止 HTML5 播放 并具有淡入和淡出周期 以平滑聆听体验 为此存在什么样的机制 使用 setTimeout 手动增加音量 jQuery 的方式 audio animate volume newVolume 1000
  • 更改

    标签中一个单词的颜色

    我正在处理一份 html 文档 并且只想在我的文档中创建一个单词 p 标记不同的颜色 如果不做完全不同的事情 这可能吗 p p tag p p I want to make only THIS word blue p p style dis
  • Angular JS 中的数组

    我是 Angular JS 新手 我正在将元素推送到数组中 然后想使用 ng repeat 在 html 中显示 scope groupedMedia Adding elements through a for loop scope gro
  • 滚动时将菜单栏固定在顶部[关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我见过一些网站 当用户向下滚动页面时 会在右侧或左侧弹出一个框 另外 注意到这个模板 http www mvpthemes com m
  • 我可以从命令行打印 html 文件(带有图像、css)吗?

    我想从脚本中打印带有图像的样式化 html 页面 谁能建议一个开源解决方案 我使用的是 Linux Ubuntu 8 04 但也对其他操作系统的解决方案感兴趣 你可以给html2ps http user it uu se jan html2
  • 如何使用文件输入在PDFJS中打开本地PDF?

    我想知道是否有办法使用选择pdf文件input type file 并使用打开它PDFJS https github com mozilla pdf js 您应该能够使用 FileReader 来获取文件对象的内容作为类型化数组 pdfjs
  • 使用 jQuery 更改父元素样式

    我有下一个 html 设置 div class one div class two a href class three Click a div div 我想更改具有类的元素的背景颜色 one当我点击元素时 three使用 jQuery 这
  • 如何在 Lift 框架中添加新页面

    如何在 lift 中的 webapp 目录中添加一个可供用户访问的新页面 目前只能通过index html访问http localhost 8080 com http localhost 8080 or http localhost 808
  • Angular UI select:从远程服务获取数据

    我正在使用角度用户界面选择 https github com angular ui ui select https github com angular ui ui select 我查看了演示的可用位置这个笨蛋 http plnkr co
  • 如何让Gmail像加载进度条一样

    我想在页面的中心和顶部创建一个像 Gmail 一样的加载进度条 并适用于所有浏览器 这是基本代码
  • CSS 无法从带有 php“includes”的相对路径工作

    文件夹结构 index php includes header html css style css 我的主项目文件夹中有 2 个子文件夹 一个是名为 includes 的文件夹 另一个名为 css 我有我的 index php主文件夹中的
  • 水平滚动的表格上的“粘性”标题......完全不可能?

    经过过去几个小时的研究后 我开始认为这是不可能的 即使在最新的浏览器上也是如此 HTML table具有水平滚动的元素 带有 粘性 thead在顶部 作为垂直滚动的周围网页的一部分 这是我的尝试 a height 100px backgro
  • 设置双指缩放时精确的滚动位置

    我正在创建一个地图应用程序 它将标记图像放置在画布上并滚动到它 我正在使用浏览器的捏缩放和滚动来放大 缩小地图 然而 我注意到有一些奇怪的行为 我想知道如何解决它 这有点难以解释 但我们开始吧 假设您处于网页的标准缩放级别 无法进一步缩小
  • 如何使用 CSS 媒体查询检测设备方向?

    在 JavaScript 中 可以使用以下方式检测方向模式 if window innerHeight gt window innerWidth portrait true else portrait false 但是 有没有一种方法可以仅
  • 内嵌显示定义术语和描述

    我正在为页面上的某些元素使用定义列表 并需要它们内联显示 例如 它们normally看起来像 我需要它们看起来像 注意多个 DD 我可以让它们在 moz 中使用 float 来正常工作 但无论我尝试什么 它们都无法在 IE 中工作 我通常会
  • 如何使整个跨度落入新行?

    这个片段显示了我想要的 http jsfiddle net 945Df 3 http jsfiddle net 945Df 3 div class sup strong a href Rosario Santa Fe Argentina a
  • Facebook 点赞按钮消失

    我的网站中的 Facebook Like 按钮出现问题 添加此代码 由 facebook 提供 按钮在创建时正确显示在任何页面中
  • Bootstrap 导航栏与 Google 位置重叠自动完成下拉菜单

    我有一个导航栏 我试图在其中添加一个地点搜索框 除了谷歌位置提示框的一小部分被导航栏重叠 如下图所示 之外 一切几乎都有效 我尝试过改变z index输入框的值改为10或2000或90000但似乎没有效果 我还缺少其他需要做的事情吗 这是

随机推荐

  • 更改 ant junit 任务中的工作目录

    我有一个运行 JUnits 测试的 ant 文件 这些测试依赖于某些配置文件的相对路径 我尝试设置批量测试的工作目录 但失败 我希望工作目录是 plugins dir name ant 脚本的 JUnit 部分
  • 如何合法使用网络字体? [关闭]

    Closed 这个问题是无关 help closed questions 目前不接受答案 我对适用于网络字体的法律有点困惑 我知道使用 Arial Times Romans Georgia 等字体是可以的 我认为使用其他商业字体是违法的 有
  • ng2-charts:如何设置 y 轴的固定范围

    我有一个使用 ng2 charts 模块的 Chart js 图表 该图表在 y 轴上显示百分比 在 x 轴上显示时间 是否可以将 y 轴设置为显示 0 到 100 而不是基于数据的动态范围 尝试将以下内容添加到图表选项中 scales y
  • 如何在java中执行定时器任务

    我只想用 Java 实现以下内容 有人有什么想法吗 public String method1 statement1 statement 5 我想为statemen1 涉及一些网络通信 设置一个计时器 如果语句 1 在 25 秒后仍未完成
  • 使用 PowerShell 对 zip 文件中的文件和文件夹进行计数

    如何计算 zip 文件中的文件和文件夹数量 我正在运行备份验证 需要将 zip 文件的文件夹结构与 Windows 文件夹的文件夹结构进行比较 最终目标是获得一个布尔值 源计数是否等于 zip 内容计数 到目前为止 这是我所掌握的 Refl
  • 如何使用 MigraDoc 让表情符号出现在生成的 PDF 中

    我正在尝试生成包含一些表情符号的 PDF 但没有成功 为了使其简单且可重现 这里是代码 Document document new Document Section section document AddSection Paragraph
  • Cocos2D 2.1:iOS 6 中已弃用“Delegate”。如何设置此 AVAudioSession 的委托?

    在 Xcode 4 5 中启动了 Cocos2D 2 1 模板 没有物理引擎 针对 iOS 6 和 iPad 在 CDAudioManager m 文件中 以下代码 AVAudioSession session AVAudioSession
  • Ninject 2.2 多重绑定

    我最近将 ASP NET MVC 3 应用程序更新为 Ninject 2 2 以前 我的主应用程序中有以下接口来实现绑定 Bind typeof IMyInterface lt gt To typeof MyImplementation l
  • prometheus 节点实例列表

    是否可以使用 prometheus 获取节点实例列表 我有一个节点导出器 但我没有看到这样的指标 我们应该添加一个新的运算符吗 您可以使用kube 状态指标 https github com kubernetes kube state me
  • c# - 系统的是/否值

    有没有办法获得 Net 框架中系统语言的 是 否 值 当我只需要 是 和 否 时 我不想为每种语言制作语言文件 你确实可以使用windows资源 我曾经做过一个例子 不幸的是在Delphi中 但你当然也可以在Dotnet中做到这一点 它真的
  • 如何在WinForms中将字典绑定到ListBox

    是否可以将字典绑定到列表框 保持列表框和成员属性之间的同步 var choices new Dictionary
  • gcloud 部署应用程序找不到导入包 - golang

    我已经将应用程序的一个版本部署到 GAE 但现在部署新版本时遇到问题 当我尝试时gcloud app deploy version VERSION 我收到一堆错误 显示远程构建找不到我的导入包 Beginning deployment of
  • Android Studio 无法正确构建 flutter 应用程序

    我正在开发一个应用程序 当我打开它时build gradle文件 出现了几个错误 def localProperties new Properties def localPropertiesFile rootProject file loc
  • C# Asp.net Membership.GetAllUsers 通过电子邮件订购

    我正在使用 Membership GetAllUsers 来获取我的用户列表 我希望返回的列表按电子邮件地址排序 因为我需要标记一些具有重复电子邮件的帐户 Membership GetAllUsers 似乎默认按用户名排序 有办法改变这种行
  • 引用附加变量?

    我怎样才能在 bash 脚本中做到这一点 bin sh func export NAME SUFFIX result of some command NAME my name func This variable will become m
  • Java 无法从 AIX 解析 DNS 地址:UnknownHostException

    我遇到了这个奇怪的错误 在 AIX 上 如果我可以从命令行访问我的服务器 使用 ping telnet 但是如果我尝试使用 java 我会遇到 UnknownHostException 这是因为 Java 无法以某种方式 使用 DNS 但我
  • 第一次调用后 LiveData 未观察到

    我实现了 LiveData 和 ViewModel 来模仿 AsyncTaskLoader 我从 DCIM 中的相机目录加载文件名 然后附加一个 fileObserver 来观察删除文件 图片 时的情况 然后回调告诉 LiveData 在发
  • 如何在 C# 中创建真正不可变的双向链表?

    这更多的是一个理论问题 在 C 中是否可以通过任何方式创建一个真正不可变的双向链表 我认为一个问题在于两个相邻节点的相互依赖 我所说的 真正 是指使用只读字段 这可以通过棘手的构造函数逻辑来完成 例如 public sealed class
  • 从 Javascript 读取当前文档的大小

    我开始玩回旋镖 https github com yahoo boomerang用于测量性能 这是非常有前途的 虽然它允许我测量延迟 带宽和页面加载时间 但我也有兴趣尝试获取在服务器端渲染初始 HTML 页面所需的时间 虽然记录浏览器开始解
  • div表格中的单元格间距

    我希望每个单元之间有 4 个左右的像素空间 我希望灰色标题有空格而不是一块灰色 我尝试尝试 background clip padding box padding 14px margin等 但无法弄清楚如何在div表中的单元格之间放置一些像