当前位置: 首页 > 面试题库 >

给HTML表格行加上边框,

华景明
2023-03-14
问题内容

是否可以<tr>一次性为表格行加上边框,而不是给单个单元格加上边框,<td>例如,

<table cellpadding="0" cellspacing="0" width="100%" style="border: 1px;" rules="none">

    <tbody>

        <tr>

            <th style="width: 96px;">Column 1</th>

            <th style="width: 96px;">Column 2</th>

            <th style="width: 96px;">Column 3</th>

        </tr>



        <tr>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

        </tr>



        <tr>

            <td style="border-left: thin solid; border-top: thin solid; border-bottom: thin solid;">&nbsp;</td>

            <td style="border-top: thin solid; border-bottom: thin solid;">&nbsp;</td>

            <td style="border-top: thin solid; border-bottom: thin solid; border-right: thin solid;">&nbsp;</td>

        </tr>



        <tr>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

        </tr>

    </tbody>

</table>

这在给定的周围给出了边界,<tr>但在单个单元格周围需要了边界。

我们可以一口气给边界<tr>吗?


问题答案:

您可以bordertr元素上设置属性,但是根据CSS
2.1规范,此类属性在分隔的边框模型中不起作用,这通常是浏览器中的默认设置。参考:17.6.1
分隔的边框模型。该 初始_值border-collapseseparate根据CSS 2.1,以及一些浏览器也将其设置为 _默认值
table。反正最终的效果是你走散了几乎所有的浏览器,除非你明确specifi边界collapse。)


因此,您需要使用折叠边框。例:

<style>
table { border-collapse: collapse; }
tr:nth-child(3) { border: solid thin; }
</style>


 类似资料:
  • 问题内容: 我有3 x 3的表格。我需要一种为每行底部添加边框并为其指定特定颜色的方法。 首先,我尝试了直接方式,即: 但这没有用。所以我像这样添加了CSS: 那仍然没有用。 我更喜欢使用CSS,因为这样我就不必在每一行中添加一个属性。我尚未向中添加属性。我希望那不会影响我的CSS。 问题答案: 我以前有这样的问题。我认为不能直接采用边框样式。我的解决方法是在行中设置s的样式: CSS:

  • 问题内容: 我有一个3 x 3的表格。我需要一种为每行底部添加边框并为其指定特定颜色的方法。 首先,我尝试了直接方式,即: 但这没有用。所以我像这样添加了CSS: 那仍然没有用。 我更喜欢使用CSS,因为这样我就不必在每一行中添加一个属性。我尚未向中添加属性。我希望那不会影响我的CSS。 问题答案: 我以前有这样的问题。我认为不能直接采用边框样式。我的解决方法是在行中设置s的样式: CSS:

  • 问题内容: 我正在尝试设计一些HTML / CSS,可以在表中的特定行周围放置边框。是的,我知道我真的不应该使用表格进行布局,但是我还不了解足够的CSS来完全替代它。 无论如何,我有一个包含多个行和列的表,其中一些与rowpan和colspan合并,我想在表的各个部分周围放置一个简单的边框。目前,我正在使用4个单独的CSS类(顶部,底部,左侧,右侧),分别附加到表格顶部,底部,左侧和右侧的单元格。

  • 主要内容:在线实例,实例,表格实例,实例,HTML 表格和边框属性,实例,HTML 表格表头,实例,更多实例,HTML 表格标签表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。 数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 HTML 表格生成器:https://www.xnip.cn/front-end/7688/。 HTM

  • HTML 表格实例: First Name Last Name Points Jill Smith 50 Eve Jackson 94 John Doe 80 Adam Johnson 67 表格 这个例子演示如何在 HTML 文档中创建表格。 (可以在本页底端找到更多实例。) HTML 表格 表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格

  • 表格类提供了多个函数,允许你从数组或者数据库结果集中自动生成HTML表格。 初始化类 像CodeIgniter的其它类一样, 在控制器中使用$this->load->library 函数来初始化表格类:$this->load->library('table'); 一旦被加载,可以这样建立一个表格库对象的实例: $this->table 例子 此例演示如何通过一个多维数组(multi-dimensi