【css】css设置表格样式-边框线合并

最新推荐文章于 2024-08-13 11:49:05 发布
最新推荐文章于 2024-08-13 11:49:05 发布
阅读量2.5k 收藏 3
点赞数 1
分类专栏： 前端 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_22744093/article/details/132055484
版权 
<style>
table, td, th {
  border: 1px solid black;//设置边框线
}

table {
  width: 100%;
}

td {
  text-align: center;//设置文本居中
}
</style>
</head>
<body>


<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Bill</td>
    <td>Gates</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Steve</td>
    <td>Jobs</td>
    <td>$150</td>
  </tr>
</table>

</body>

渲染效果：
在这里插入图片描述
渲染出来的效果不好看，边框线存在两条，现在需要将它们合并，添加 border-collapse: collapse。

<style>
table, td, th {
  border: 1px solid black;
}

table {
  border-collapse: collapse;//添加边框线合并
  width: 100%;
}

td {
  text-align: center;
}
</style>
</head>
<body>


<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Bill</td>
    <td>Gates</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Steve</td>
    <td>Jobs</td>
    <td>$150</td>
  </tr>
</table>

</body>

渲染效果：
在这里插入图片描述

科学熊
关注
专栏目录
1、4表格细线边框合并
qq_62865634的博客
10-08 1131
本文仅仅简单介绍了表格合并后边框会1+1=2，我们要让边框变为1+1=1，那么就加border-collapse：“collapse”
css两个边框横合并,CSS属性 table 的 border-collapse 边框合并
weixin_39759441的博客
08-03 3550
说明该CSS属性用来设定表格的行和列的边框是合并成单边框，还是分别有各自的边框separate 缺省值。边框分开，不合并。collapse 边框合并。即如果相邻，则共用同一个边框。虽然在DIV+CSS 时代 table 的权重越来越低，但是有时候，还是局部地方table 还是挺好用的特别是制表方面，还是table 比较的方便。当然，制表肯定少不了边框，但是如果你直接在td上加边框，就会出现一种情况...
table边框合并
wei_jie_zhang的专栏
03-15 3141
外表格样式： 内表格样式：
html 关于table合并外边框以及自动滚动问题汇总
最新发布
lfl18326162160的博客
08-13 296
固定高度显示上下滑动。
CSS 边框合并
weixin_44684357的博客
11-16 343
CSS 边框合并： table{ border-collapse:collapse /*相邻两个table>tr>td 边框的线的合并*/ }
用CSS样式描述表格Table边框
12-11
隐藏边框优先级最高，无样式边框最低。当存在不同宽度的边框时，较宽的边框优先级更高。此外，边框样式的优先级也遵循一定的顺序，如双实线高于单实线等。 值得注意的是，虽然CSS提供了强大的样式控制能力，但不同...
CSS实现表格细边框的两种方法
12-13
在网页设计中，CSS（层叠样式表）用于控制页面元素的样式，其中包括对表格的边框处理。本文将详细讲解两种常见的CSS方法，用于创建美观的表格细边框，这两种方法都通过了XHTML验证。 第一种方法是利用`border-...
关于表格table嵌套,边框合并问题的解决方法
09-28
1. **设置边框合并（Border Collapse）**：通过CSS属性`border-collapse`，我们可以控制表格的边框是否合并。将其设置为`collapse`，可以使所有相邻边框合并成一条边框，从而消除重叠。例如： ``` ...
css 细线表格 css制作table细线表格常用属性
12-13
`<style>`标签用于内联样式，便于控制表格样式。 通过以上方法，我们可以创建出具有清晰、细腻边框的表格，使得数据展示更加美观。在实际应用中，可以根据需要调整边框颜色、宽度和样式，以适应不同的设计风格。...
CSS中边框合并
qq_36836332的博客
08-07 7395
             1.两个元素上下放置时，上边元素的下边距和下边元素的上边距合并，边距值为两边距中的较大者              2.两元素嵌套时（父元素无边框）上下边距发生合并,如果父级没有边框，子集添加margin值时，相当于给父级添加                            margin值，父级移动，子集不移动              3.当一个空元素没有边框或填...
table边框合并问题
qq_48222936的博客
08-11 4337
box-sizing:border-box：盒子不会被padding和border撑大，按照width和height实际大小显示。则会合并表格中所有的td边框，实现边框1+1=1的效果。所以我给table和td（只有这两个添加了样式）添加了box-sizing:border-box样式。我给table是800px宽度但是却出现了小数，所以我猜测肯定是边框撑大了盒子造成合并的边框变粗。这里最后一行的top边框会重叠，并且加粗，强迫症会非常难受也不美观。这样一来就解决了边框合并变粗(强迫症)问题。...
CSS中为表格（table）设置合并边框模型（合并边框）
qq_43435403的博客
10-10 3149
CSS中为表格（table）设置合并边框模型（合并边框）的方法： table { border-collapse: collapse; }
table 设置合并边框
热门推荐
山外小楼
07-27 1万+
先来看看原始表格 &lt;table border="1 "&gt; &lt;thead&gt; &lt;tr &gt; &lt;th&gt;网站&lt;/th&gt; &lt;th&gt;资源&lt;/th&gt; &lt;th&gt;url&lt;/th&gt; &lt;t
使用CSS border-collapse样式 合并表格边框
z69183787的专栏
10-23 6201
separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。 collapse 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。 inherit 规定应该从父元素继承 border-collapse 属性的值。
CSS3-案例-表格边框合并
weixin_54021642的博客
06-25 244
表格边框合并
【CSS】盒子边框 ③ ( 设置表格细线边框 | 合并相邻边框 border-collapse: collapse； )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-16 2244
一、设置表格细线边框 1、表格示例 2、合并相邻边框 3、完整代码示例
html表格边框线合并6,CSS表格 合并表格边框
weixin_35739967的博客
06-17 1298
--------------------------------------------------------------------------------------------------------------border-collpase: 边框会合并为一个单一的边框----------------------------------------------------------...
合并表格边框线
小+
01-17 1077
方法一：在html中 table{ width:800px; border:1px solid blue; } td{ border:1px solid blue; } 序号 姓名 电话 0001 小二 1234567890 0002 小三 1234567890 在
css表格边框线怎么设置
06-03
你可以使用CSS的border属性来设置表格的边框线。例如，如果你想为表格添加实线边框线，可以使用以下代码： ``` table { border-collapse: collapse; } td, th { border: 1px solid black; } ``` 这将把表格的单元格的边框线设置为1像素的黑色实线。border-collapse属性用于合并相邻单元格的边框线，使表格看起来更整洁。你可以根据需要更改边框线的宽度、颜色和样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

科学熊

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值