原生html+css实现表格圆角效果

于 2024-08-12 20:02:47 发布
阅读量542 收藏 7
点赞数 9
文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44528408/article/details/141140734
版权

有个需求需要用原生html+css的原生table标签实现圆角表格。
有的方式圆角会很模糊，或者有毛边，查找资料+调整后实现了这个功能。
实现效果：
请添加图片描述

代码：

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title></title>
    <style>
      table {
     
        font-size: 16px;
        text-align: center;
        margin: 20px auto 0;
        border-collapse: separate;
        border-spacing: 0;
        border-top: 2px solid #333;
        border-radius: 12px;
      }

      table thead tr,
      table tbody tr {
     
        height
最低0.47元/天 解锁文章
会不会惊动山神
关注
html中table四角圆弧,table设置圆角的两种方式
weixin_42357618的博客
06-11 7544
默认代码table {width: 100%;background-color: yellowgreen;text-align: center;}表头1表头2表头3123456复制代码原因如果我们直接对table设置border-radius是不会生效的， 因为table的默认属性border-collapse值为collapse。border-collapse:collapse和border-r...
html table 圆角,巧用css代码打造圆角table
weixin_34862561的博客
06-15 362
我们都知道css是一种层叠样式表(英文全称:Cascading Style Sheets)，是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。那么今天就教大家一个小的技巧用css代码打造圆角table，当然也可以制造圆角div。效果如下图：CSS打造圆角...
用CSS样式定义的圆角表格
04-07
网页特效用CSS样式定义的圆角表格......................
CSS制作圆角表格
Yemy的专栏
12-29 2202
       u.corner u   {       height: 1px;       font-size:1px;       display: block;       overflow: hidden;       /*author: meizz*/       text-decoration: none;       background-color: green;   }   u.
css 圆角表格
peade的博客
09-27 272
今天在开发的发现，table设置border-collapse, border-radius,overflow三个属性，会和border属性发生冲突,下面这种写法，页面显示的border有大小，但是背景是透明的 table{ border-collapse: collapse; width: 85%; margin: 0.625rem auto; border...
Css表格圆角
流星的博客
01-22 545
   
css实现真正的圆角表格
管子（zero）的杂乱空间
12-06 1221
<!--google_ad_client = "pub-4490194096475053";/* 内容页,300x250,第一屏 */google_ad_slot = "3685991503";google_ad_width = 300;google_ad_height = 250;//--><script type="text/javascript"src="
html中表单设置圆角,使用css选择器来实现表格的四角变圆角——2019.9.6
weixin_39760295的博客
07-14 2177
这次对表格来一次操作，用css控制表格中的某个属性进改变。目的嘛就是为了熟悉属性选择操作。先获得表格~勇者培训中心课程安排星期星期一星期二星期三星期四星期五上午治疗战斗闪避体魄意志治疗战斗闪避体魄意志治疗战斗闪避体魄意志下午战斗闪避体魄意志治疗战斗闪避体魄意志治疗战斗闪避体魄意志治疗备注：还欠修女两枚金币接着再用css来改变样式table{border:1pxsolid#444;borde...
html+css+js基础问答
qq_43751465的博客
08-26 5213
css3 1.标签语义化 顾名思义，合理的标签干合适的事情 块级（display：block）：div 、p、h1~h6、hr、ul、ol、li、dl、dd、form、table、header、footer、main、nav、sector、arcitcle、pre、table、tbody、thead、th、tr、tfoot 行级（display：inline）：a、span、small、strong、em、i、code、 行内块（display：inline-block）：img、input 区别： 1.
超简单！使用CSS制作圆角表格 3步搞定
04-08
超简单！使用CSS制作圆角表格 3步搞定
table 圆角 html5 css3
10-16
table 圆角 html5 css3
【网页设计】web前端期末大作业html+css
08-10
- **CSS3**：是CSS的最新版本，提供了更为强大的样式设置功能，如圆角（border-radius）、阴影（box-shadow）、渐变（gradients）、动画（animations）等，这使得开发者可以用纯CSS实现复杂的视觉效果，而无需依赖...
尚硅谷web前端HTML5+CSS3笔记
qq_52380174的博客
12-19 4451
HTML/CSS笔记#自用#尚硅谷#李立超
css设计表格圆角最简单的方法
weixin_45635130的博客
07-06 1182
属性介绍看：https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-collapse。
CSS中的table标签的圆角
syl2850246的博客
10-13 3204
在CSS中如果给table标签加了border-collapse属性的话想要在给table添加 border-radius是无效果的,发生冲突
table表格设置圆角
业余前端的职业经历
06-14 4133
表格设置圆角
CSS设置table表格圆角边框
weixin_49821165的博客
07-19 5307
有些情况下需要给表格设置圆角，但是border-radius与border-collapse:collapse;会产生冲突，给table设置border-radius并不会生效。 可以通过减少单元格框线的方式来不设置boder-collapse;collapse; 这样就能给表格添加圆角了。 效果如图 源码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8">
原生html+css实现后台管理系统布局
最新发布
09-12
使用原生HTML和CSS实现后台管理系统布局需要以下步骤： 1. 首先，确定整体布局结构。根据引用和引用的描述，后台管理系统通常采用分栏布局，其中包含顶部导航栏、侧边栏和主要内容区域。可以使用`<header>`标签创建顶部导航栏，使用`<nav>`标签创建侧边栏，使用`<main>`标签创建主要内容区域。 2. 接下来，设置CSS样式。可以使用CSS的`position`属性来定位各个元素。引用和引用中提到的多页面布局可以通过使用`<link>`标签引入外部CSS文件的方式来实现，以避免样式代码的重复。 3. 对于顶部导航栏，可以使用`<ul>`和`<li>`标签创建一个水平的导航菜单。通过设置CSS样式，可以将其放置在页面的顶部，并设置背景色为100%宽度，使其与页面宽度保持一致。 4. 对于侧边栏，可以使用`<ul>`和`<li>`标签创建一个垂直的导航菜单。通过设置CSS样式，可以将其放置在页面的侧边，并设置背景色为适当的宽度。 5. 主要内容区域可以根据具体需求采用不同的布局方式。可以使用`<div>`标签创建多个区域，并设置其样式为适当的宽度和高度。 6. 为了实现响应式布局，可以使用CSS的媒体查询功能。通过在CSS文件中添加媒体查询代码，可以根据屏幕大小和设备类型来调整布局和样式。 综上所述，使用原生HTML和CSS实现后台管理系统布局的关键是确定整体布局结构，并通过设置CSS样式来实现各个元素的定位和样式效果。同时，可以考虑使用外部CSS文件和媒体查询来实现多页面布局和响应式设计。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值