在 上添加边框

2023-11-29

在另一篇文章中,我读到,如果我需要为除标题行之外的每一行添加边框,我应该使用 THEAD & TBODY。所以我已将其添加到页面中,但我找不到如何将其应用到 TBODY。我是新手,所以请耐心等待。我可以在整个表格周围放置边框,但需要排除标题行。这是一个表格的副本,其边框属性位于 TABLE 标记中,效果良好。

<table width="300" BORDER=1 CELLPADDING=3 CELLSPACING=1 RULES=ROWS FRAME=BOX>
              <thead>
                <tr>
                    <th width="60" align="center" valign="top" scope="col">Type</th>
                    <th width="200" align="left" valign="top" scope="col">Address</th>
                </tr>
              </thead>
    <tbody>
                <tr>
                    <td align="center" valign="top">Shipping</td>
                    <td align="left" valign="top">123 Main St</td>
                </tr>
    </tbody>
</table>

任何帮助表示赞赏。


您应该使用 CSS 进行演示/样式设置:

tbody {
    border: 1px solid #ccc;
}

JS 小提琴演示.

我不确定你有多新,但为了完整起见:

<head>
    <!-- other stuff -->
    <style type="text/css">

        tbody {
            border: 1px solid #ccc;
        }

    </style>
    <!-- other stuff -->
</head>

您还可以在元素的开始标记中使用内联样式,例如:

<tbody style="border: 1px solid #ccc;">

不过,最好链接到外部样式表,这会进入head文件的内容:

<link href="path/to/stylesheet.css" rel="stylesheet" type="text/css" />

或者,如果您的目标浏览器不提供样式设置选项tbody with a border,您可以针对特定细胞内tbody使用以下内容:

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

tbody tr td:first-child {
    border-left: 2px solid #000;
}

tbody tr td:last-child {
    border-right: 2px solid #000;
}

tbody tr:first-child td {
    border-top: 2px solid #000;
}

tbody tr:last-child td {
    border-bottom: 2px solid #000;
}

JS 小提琴演示.

当然,这确实需要浏览器能够理解并实现:last-child and :first-child伪类。

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

在 上添加边框 的相关文章

  • FireFox 中的自动滚动

    我的应用程序是实时聊天 我有一个 Div 来包装消息 每条消息都是一个 div 所以 在几条消息之后 我的 DOM 看起来像这样 div div Message number two div div div div
  • 如何获取浏览器视口中当前显示的内容

    如何获取当前正在显示长文档的哪一部分的指示 例如 如果我的 html 包含 1 000 行 1 2 3 9991000 并且用户位于显示第 500 行的中间附近 那么我想得到 500 n501 n502 或类似的内容 显然 大多数场景都会比
  • 无效字符错误:“fred”

    我确信他一定是一个新手问题 简单来说 我想定义我的第一个 Polymer dart 组件 只是我一直在同一个减速带上踢脚趾 为了使事情变得非常简单 我将其简化为一个非常简单的示例 我做了一个简单的rename示例 跑表 来自 Dart 组件
  • 当输入字段处于焦点时,占位符不会消失

    当用户选择字段时 表单上每个输入字段的占位符值应该消失 但事实并非如此 文档类型是 HTML5 http dailyspiro com index html http dailyspiro com index html
  • 使用 JavaScript 在 HTML 表中动态添加行并通过提交按钮获取每个文本框的文本框值

    我有一个可以动态添加行的表 当我提交保存按钮时 我想将每行中的数据获取到 php 数组 请有人帮我解决这个问题 我是java脚本的新手 对此知之甚少 谢谢你
  • Canvas GetImageData() / PutImageData() 在移动设备上的性能很糟糕

    我正在做一个小型 HTML5 游戏 在地图开头加载精灵时 我使用 GetImageData 循环遍历所有图像 PutImageData 进行一些处理 这在我的电脑上运行得非常好 但是在我的手机上却慢得可怕 PC 5 6 ms iPhone
  • 根据用户输入的边计算三角形面积和周长

    我正在尝试编写一个程序 根据用户的输入计算三角形的面积和周长 他们应该输入侧面 这就是我所拥有的一切 由于某种原因 我无法很好地理解而无法查找 它不起作用
  • CSS 安全区域属性在 iPhone X 上不起作用

    就我而言 我正在 iPhone X 上运行一个 Web 应用程序 我尝试在顶部添加一个填充 以使用 Webkit 的安全区域 css 属性将我的身体推到安全区域padding top constant safe area inset top
  • 禁用单一样式的 CSS 转换?

    为单个样式启用 CSS 过渡非常容易 但是是否可以为单个样式禁用它们 单一样式过渡的常用方法是 div transition opacity 0 5s 但我想做的是设置一个全局转换 然后为单个属性禁用它 也许是这样的 div transit
  • 您可以使用 JavaScript 触发自定义 HTML5 表单错误吗?

    如果我有一个像这样的输入
  • 如何在光标下的所有元素上调用 mouseover?

    我有一个网络应用程序 每次单击时都会创建一个点 见下文 当我将鼠标悬停在一堆点上时 我希望光标下的每个点都会触发 mouseover 或 mouseenter 事件 然而 只有一个事件被触发 即堆栈 顶部 的点的事件 当鼠标移动到一堆多个点
  • HTML 覆盖高度覆盖整个可见页面

    我有一个使用 AJAX 加载一些内容的网页 我想在加载过程中显示带有加载指示器的覆盖层 以便用户无法与页面的大部分内容交互 除了顶部的菜单 我正在使用 jQuery 和jQuery BlockUI 插件 http malsup com jq
  • 我的 iPhone 6 获取 iPhone 5 媒体查询

    我不明白这里发生了什么事 我在 CSS 媒体查询中专门针对 iphone 5 media only screen and min device width 320px and max device width 568px some div
  • 在 HTML 中移动选取框/下移文本

    我正在尝试向下移动或移动 HTML 中的文本 但我似乎无法将其移动到任何地方 我添加了一个颜色命令来更改文本的颜色 但似乎只是移动了 它一直到顶部
  • 点击问题:动态生成的链接不触发点击功能

    下面是两个代码片段 由于某种原因什么也没有发生 但来自同一个 JS 文件的其他 jQuery 函数在带有 UL 的页面上执行得很好 这是在盯着我看吗 ul class paganation li 1 li li a href 2 a li
  • 空 URL 哈希导致页面在 js 事件上跳转

    我有一个带有下一个和上一个按钮的照片库 如果我的某个 javascript 方法由于某种原因被破坏 那么当单击其中一个按钮时 它会向 url 添加一个哈希值 即 www google com 我知道可以给散列一个 div id 来跳转到页面
  • Web SQL 数据库 + Javascript 循环

    我正在尝试解决这个问题 但我自己似乎无法解决 我正在使用 Web SQL DB 但无法让循环正常使用它 I use for var i 0 i lt numberofArticles 1 i db transaction function
  • 捕获 XSS(跨站脚本)攻击的最佳正则表达式(Java 中)?

    杰夫实际上在净化 HTML http refactormycode com codes 333 sanitize html 但他的示例是用 C 编写的 而我实际上对 Java 版本更感兴趣 有人有更好的 Java 版本吗 他的示例是否足以直
  • 如何在粘贴时获取文本区域输入字段的新值?

    我发现当我尝试从文本区域字段读取值时onpaste调用函数时 我得到字段的旧值 粘贴操作之前的值 而不是新值 粘贴操作之后的值 以下是此行为的演示 http jsfiddle net qsDnr http jsfiddle net qsDn
  • 通过 vh 和 vw 调整 css 字体大小

    所以我想根据容器的大小自动调整文本的大小 但是如果我使用类似的东西 font size 5vw 看起来不错 但是当我缩小页面时 高度开始变得太小 无论如何 我是否可以根据 vh 和 vw 调整文本大小 例如 如果我只是减小页面的宽度 那么高

随机推荐