如何仅在表格内应用边框?

2024-05-01

我想弄清楚如何仅在表格内添加边框。当我做:

table {
    border: 0;
}
table td, table th {
    border: 1px solid black;
}

边框围绕整个表格以及表格单元格之间。我想要实现的是仅在表格单元格周围的表格内部有边框(表格周围没有外部边框)。

这是我用于表的标记(尽管我认为这并不重要):

<table>
    <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
    </tr>
    <tr>
        <td>Cell (1,1)</td>
        <td>Cell (1,2)</td>
    </tr>
    <tr>
        <td>Cell (2,1)</td>
        <td>Cell (2,2)</td>
    </tr>
    <tr>
        <td>Cell (3,1)</td>
        <td>Cell (3,2)</td>
    </tr>
</table>

以下是我应用于大多数表格的一些基本样式:

table {
    border-collapse: collapse;
    border-spacing: 0;
}

如果您正在做我认为您正在尝试做的事情,那么您将需要更多类似这样的东西:

table {
  border-collapse: collapse;
}
table td, table th {
  border: 1px solid black;
}
table tr:first-child th {
  border-top: 0;
}
table tr:last-child td {
  border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
  border-left: 0;
}
table tr td:last-child,
table tr th:last-child {
  border-right: 0;
}

jsFiddle 演示 http://jsfiddle.net/Daniel_Hug/8M2wp

问题是您在所有单元格周围设置了“完整边框”,这使得整个表格看起来好像有边框。

编辑:有关这些伪类的更多信息可以在怪异模式 http://www.quirksmode.org/css/firstchild.html,而且,正如所预料的,你几乎是 S.O.L.在IE支持方面。

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

如何仅在表格内应用边框? 的相关文章

  • jQuery:查找文本并替换为 HTML

    我尝试查找并替换文本 使用 jQuery 实际上我正在尝试在文本周围添加一个 span 元素 我还应该能够再次删除跨度而不会丢失里面的文本 例如 假设我有以下情况 span This is a span element span 我希望能够
  • Overflow:auto 导致子 DIV 的绝对元素消失

    我有一个 div A 我在其中设置了overflow auto 现在在该 div 内 我有两个 div 父 div B 设置为position relative和子 div C 是position absolute 现在的问题是 设置ove
  • SVG img keepAspectRatio Chrome

    当我对 SVG 文件中的图像使用preserveAspectRatio none 时 它 似乎在 Google Chrome 中不起作用 SVG 不会根据图像宽度和高度进行缩放
  • scrollWidth/scrollHeight 给出无效尺寸

    如所述https developer mozilla org en Determining the dimensions of elements https developer mozilla org en Determining the
  • 父级嵌入框阴影与子级 div 重叠

    我遇到一个问题 子级 div 与父级框阴影底部重叠 父级有一个 max height w overflow y 滚动 任何帮助都会很棒 https i stack imgur com jQe0r png https i stack imgu
  • 具有有限行数和字符数限制的文本区域

    我需要具有 TextArea 的功能 1 maximum total lines 6 and 2 in each line there must be maximum of 16 chars 3 if user enters 17th ch
  • ckeditor 字体样式 13 px

    我之前曾问过相关问题 但在尝试了所有发生错误的可能性之后 我发现 在ckeditor中 如果您复制一些文本并粘贴它 它默认粘贴为 p style font size 13px 示例图片 HTML CODE p div p Original
  • 排除单个浏览器使用 CSS 类

    我想排除 Internet Explorer 使用特定的 CSS 类 这可能吗 Details 我有一个 css 类 看起来像 input type radio checked input type radio hover box shad
  • 双弧形

    我目前正在尝试生成 波浪形幽灵底部 形状 该形状包含两条双曲线 虽然底部的部分这个图片 http images clipartpanda com ghost clip art castle ghost clipart1 jpg我认为以更好的
  • 限制文本区域中每行的字符数

    我整个周末都在寻找解决这个难题的方法 但尚未找到一个可以正常工作的解决方案 我想要实现的是限制文本区域中每行的字符数 不是相同地限制它们 而是我选择的每行不同的字符数 例如 我只想在我的文本区域中包含 4 行 第 1 2 和 3 行将限制为
  • 将一个文本框的内容复制到另一个文本框

    假设在文本框中输入了一个条目 是否可以在第二个文本框中保留相同的输入文本 如果是这样 这是如何完成的
  • 未捕获的引用错误:myFunction 未定义[重复]

    这个问题在这里已经有答案了 这到底是怎么回事 http jsfiddle net sVT54 http jsfiddle net sVT54
  • html5 输入模式属性在表单之外不起作用?

    这把小提琴 http jsfiddle net 2gaw3 按预期工作 当用户输入无效的国家 地区代码时 它会显示警告 这另一个小提琴 http jsfiddle net y66vH 4 没有form元素 不起作用 看来输入的pattern
  • Aptana Studio 3 上的预览选项卡在哪里?

    我在 Windows PC 上使用 Aptana Studio 2 并有一个选项卡用于在 IE 上预览页面 另一个选项卡用于在 Firefox 上预览 但我切换到了 Aptana 3 我不知道是没有预览还是我没有找到它 是的 我在 stac
  • 使用 jquery 将字符串数组转换为整数

    我正在尝试将 jquery 中的字符串数组转换为整数数组 这是我的尝试 var cdata data values split each cdata function i l l parseInt l 我认为在这种情况下你不需要使用 Jqu
  • 更改离子搜索栏的占位符和清晰图标颜色不是全局的吗?

    我有两个离子搜索栏 我只需要更改其中之一的占位符和清除图标颜色
  • Jquery,清除/清空 tbody 元素的所有内容?

    我认为这会相当简单 但似乎空方法无法清除我拥有的 tbody 如果有人知道执行此操作的正确方法 我将不胜感激 我只想删除 tbody 中包含的所有内容 到目前为止我正在尝试 tbodyid empty HTML table tbody tr
  • 如何在 Bootstrap 3 中指定行高?

    使用 Bootstrap 3 我将 row 类的高度设置为 3 5em 我在行中有几个输入 它们与行的顶部对齐 我想让它们底部对齐 我尝试过垂直对齐 底部的样式 但这似乎不起作用 我想让东西底部对齐的原因是我有一个浮动标签 我在输入字段上方
  • MYSQL 按喜欢/不喜欢和受欢迎程度排序

    我有评论表 其中包括喜欢和不喜欢的内容 现在我在正确的顺序上遇到了问题 实际上 我的系统在顶部显示了最多点赞的评论 我正在 youtube 上寻找类似系统的东西 这意味着 100like 100dislikes 的评论的顺序高于 1 1 我
  • span 和 iframe 正文中的宽度(以像素为单位)

    我需要知道 a 的宽度 nbsp 以像素为单位 以及是否取决于字体大小 另外 页面中不同元素的情况是否有所不同 还有 就是 nbsp 与常规不同 目的 nbsp 不间断空格 位于正常空格之上是为了防止单词之间出现换行 您可以使用多个 nbs

随机推荐

  • 我不断听说 DLL 地狱——这是什么? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 如何向 Sass 添加自定义函数(通过 Sass::Script::Functions)?

    我使用的是 vanilla Sass 没有 Compass SUZY Bourbon etc 但我无法确定将 rb 文件放在哪里 我不是 Ruby 程序员 但我确实找到了一个别人编写的函数可以满足我的需要 我尝试过搜索 但得到的结果是死胡同
  • 展平 JavaScript 对象数组

    我有一个具有层次结构的对象数组 如下所示 name ParentOne children name ParentOneChildOne name ParentOneChildTwo children name ParentOneChildT
  • 在cmake中检测项目语言

    我想检测当前的项目语言 例如 如果我有这样的东西 cmake minimum required VERSION 3 0 project foo VERSION 1 0 LANGUAGES CXX 我需要这样的东西 if project la
  • 如何处理会减慢构建和 IDE 速度的巨大 efcore 迁移设计器文件

    我目前有一个 efcore 2 1 项目 包含大约 230 个实体和大约 350 个迁移 每次我添加 efcore 迁移时 都会创建一个设计器文件 该文件大约 535 kb 并且不断增长 所有设计器文件总共 150mb 这使得 IDE 缓慢
  • 如何在 XAML 中自动调整列表视图的高度

    我的列表视图对象接收图像 ID 号和概要 概要的大小各不相同 因为有些有空格返回 我注意到 ListView 有一个可以设置的行高 我现在设置为 250 但它只能是一个固定值 那么会发生什么 我的网格对于 ListView 来说变得太大 导
  • 判断一个点是否在多面体内部

    我试图确定某个特定点是否位于多面体内部 在我当前的实现中 我正在研究的方法采用我们正在寻找多面体面的数组 在本例中为三角形 但稍后可能是其他多边形 的点 我一直在尝试根据这里找到的信息进行工作 http softsurfer com Arc
  • 使用 lodash 按值(整数)对数组进行排序

    我真的很挣扎 但我找不到解决方案 我有一个数组 我想按值 所有整数 对其进行排序 我想 好吧 让我们使用 lodash 肯定有一个方便的功能 不知怎的 我不知道该怎么做 到目前为止我得到了这个 myArray 3 4 2 9 4 2 如果我
  • BI Publisher 和 Excel 模板预览错误

    我正在使用 Excel 2013 并添加了 BI 发布器 我加载示例数据 并进行预览 我得到以下内容 请指教 谢谢詹姆斯 启动 Excel 预览 仅开放 false mTemplate C Users AJCENTROID AppData
  • 非通用接口是通用接口的同义词

    我在 C 中有一个通用接口 并且几乎总是将它与其中一种类型一起使用 我想为该类型创建一个非通用接口并使用它 假设我有以下代码 public interface IMyGenericList
  • jquery:卸载还是卸载之前?

    当用户从当前页面导航时 我想向服务器发布一条消息 我现在正在使用 unload 但结果不可靠 即使在其文档中也是如此 卸载事件的准确处理 各个版本都有所不同 浏览器 例如 某些版本 Firefox 的触发事件当 链接已被跟踪 但当 窗口已关
  • 是 F# 映射上的迭代还是集合中序遍历?

    AFAIK F Map 和 set 被实现为红黑树 所以我猜这些的迭代将是有序遍历 我做了一些测试 迭代结果总是排序的 但我想确定一下 是按顺序遍历吗 MSDN 上的文档非常适合解决这个问题 例如 返回值Set toSeq http msd
  • 为什么/何时将运算符指定为显式很重要?

    我借用了下面的代码另一个问题 https stackoverflow com a 7305947 93394 稍作修改 在我的代码中使用 internal class PositiveDouble private double value
  • 预期的 catch() 或返回(promise/catch-or-return)

    我是 JavaScript 新手 这是我在 javascript 中第一个在 firebase 上部署函数的函数 得到这个错误 eslint Unexpected function expression prefer arrow callb
  • 处理在没有全局变量的情况下跨函数使用的变量

    所以我正在开发一个基本的文字游戏 你会得到一只字母 手 字典对象 你可以用它来创建单词并获得分数 这个 手牌 被用在许多函数的参数中 计算玩家的分数 在玩家使用一个或多个字母后更新手牌中的字母数量 显示手牌 检查玩家单词的有效性 ETC 从
  • 奇怪的 Atomikos 异常 - init() 中的错误:日志已在使用中?

    我们尝试在多个本地环境上运行相同的 Web 应用程序 该应用程序使用 Atomikos 作为事务管理器 每个环境都使用相同版本的 spring atomikos tomact 等 并具有相同的配置文件 其中一些工作正常 但其中之一 当我们尝
  • Spring Security 实体字段级安全

    我有一个 Spring MVC 应用程序 它提供了一个视图 其中显示了来自Customer实体 例如姓名 地址 电话号码等 该应用程序具有各种角色 例如ROLE USER and ROLE ADMIN 用户具有ROLE USER只能看到客户
  • Nginx反向代理(proxy_pass)不传递子文件夹

    我想在子文件夹配置中运行应用程序 Mattermost 例如 https www example com mattermost https www example com mattermost location mattermost gzi
  • 使用 Python 2.7 解析 msg/eml 文件

    有没有可以解析msg或eml文件的库 我编写了一个脚本 一旦将电子邮件转换为 txt 文件 就会对其进行解析 但是我找不到一个电子邮件客户端 可以让我轻松地将电子邮件从 gui 拖放到文件夹中作为 txt 文件 如果有人知道这一点 我会很高
  • 如何仅在表格内应用边框?

    我想弄清楚如何仅在表格内添加边框 当我做 table border 0 table td table th border 1px solid black 边框围绕整个表格以及表格单元格之间 我想要实现的是仅在表格单元格周围的表格内部有边框