css表格边框样式,css控制表格边框

怎么用CSS设置html中的表格边框样式

border 在一个声明中设置所有的边框属性。 1

成都创新互联公司是一家专注于做网站、网站制作与策划设计,青阳网站建设哪家好?成都创新互联公司做网站,专注于网站建设十余年,网设计领域的专业建站公司;建站业务涵盖:青阳等地区。青阳做网站价格咨询:13518219792

border-bottom 在一个声明中设置所有的下边框属性。 1

border-bottom-color 设置下边框的颜色。 2

border-bottom-style 设置下边框的样式。 2

border-bottom-width 设置下边框的宽度。 1

border-color 设置四条边框的颜色。 1

border-left 在一个声明中设置所有的左边框属性。 1

border-left-color 设置左边框的颜色。 2

border-left-style 设置左边框的样式。 2

border-left-width 设置左边框的宽度。 1

border-right 在一个声明中设置所有的右边框属性。 1

border-right-color 设置右边框的颜色。 2

border-right-style 设置右边框的样式。 2

border-right-width 设置右边框的宽度。 1

border-style 设置四条边框的样式。 1

border-top 在一个声明中设置所有的上边框属性。 1

border-top-color 设置上边框的颜色。 2

border-top-style 设置上边框的样式。 2

border-top-width 设置上边框的宽度。 1

border-width 设置四条边框的宽度。 1

outline 在一个声明中设置所有的轮廓属性。 2

outline-color 设置轮廓的颜色。 2

outline-style 设置轮廓的样式。 2

outline-width 设置轮廓的宽度。

表格细边框的CSS样式什么设置？

1.所有的均为细边框。\x0d\x0atable,table td,table th{border:1px solid #ff0000;border-collapse:collapse;}\x0d\x0a\x0d\x0a2.指定的为细边框，把放在中，用ID作索引，如下：\x0d\x0a#mdA table,#mdA table td,#mdA table th{border:1px solid #ff0000;border-collapse:collapse;}\x0d\x0a\x0d\x0a\x0d\x0a \x0d\x0a \x0d\x0a

\x0d\x0a \x0d\x0a

\x0d\x0a \x0d\x0a

\x0d\x0a \x0d\x0a\x0d\x0a

回答于 2022-11-16

抢首赞

已踩

查看全部1个回答

立即下载

— 为你推荐更多精彩内容 —

正在加载

加载失败 点击重新加载

微信

微博

QQ

QQ空间

答案纠错

举报

取消

赞赏答主

5

10

50

100

200

已赞赏0财富值

合计：0 财富值

登录后赞赏

选择举报类型

侵犯版权

色情低俗

涉嫌违法犯罪

时政信息不实

垃圾广告

低质灌水

工作人员会在48小时内处理,处理结果请关注系统通知,感谢您对百度知道的支持。

确定

void function(a,b,c,d,e,f){function g(b){a.attachEvent?a.attachEvent("onload",b,!1):a.addEventListener&&a.addEventListener("load",b)}function h(a,c,d){d=d||15;var e=new Date;e.setTime((new Date).getTime()+1e3*d),b.cookie=a+"="+escape(c)+";path=/;expires="+e.toGMTString()}function i(a){var c=b.cookie.match(new RegExp("(^| )"+a+"=([^;]*)(;|$)"));return null!=c?unescape(c[2]):null}function j(){var a=i("PMS_JT");if(a){h("PMS_JT","",-1);try{a=a.match(/{["']s["']:(\d+),["']r["']:["']([\s\S]+)["']}/),a=a&&a[1]&&a[2]?{s:parseInt(a[1]),r:a[2]}:{}}catch(c){a={}}a.r&&b.referrer.replace(/#.*/,"")!=a.r||alog("speed.set","wt",a.s)}}if(a.alogObjectConfig){var k=a.alogObjectConfig.sample,l=a.alogObjectConfig.rand;d="https:"===a.location.protocol?""+d:""+d,k&&l&&l>k||(g(function(){alog("speed.set","lt",+new Date),e=b.createElement(c),e.async=!0,e.src=d+"?v="+~(new Date/864e5)+~(new Date/864e5),f=b.getElementsByTagName(c)[0],f.parentNode.insertBefore(e,f)}),j())}}(window,document,"script","/hunter/alog/dp.mobile.min.js");

window.tt = 1668993545;

CSS控制表格边框样式问题

html

headtitleHTML

Table/title/head

style

type="text/css"

TABLE

{

border-collapse:

separate;

border:

2px

solid

blue;

}

.one{

border-left:none;

border-right:1px

solid

#f00;

border-top:1px

solid

#f00;

border-bottom:1px

solid

#f00;}

/style

body

table

summary="TechRepublic.com

-

Tables

and

CSS"

theadtr

thabbr="salesperson"

scope="col"Person/th

thabbr="sales"

scope="col"Sales/th

/tr/thead

tbodytr

td

class="one"Mr.

Smith/td

td600.00/td

/trtr

tdMr.

Jones/td

td0000.00/td

/trtr

tdMs.

Williams/td

td

class="one"0000.00/td

/tr/tbody

tfoottr

tdLet's

sale,

sale,

sale!/td

/tr/tfoot/table/body/html

我设置了一个样式one，单元格左边没有边框，上下和右边有边框，颜色你可以自己设置。

如何用css控制表格的边框

表格的边框分为3个元素决定：table,th,td;

如果三种元素全部设置了border样式，那么会发现外层有2层border,里面的th与th，td与td,td与th之间的border也是有2层的，所以，在设置border之前最好先想好通过什么样的规则来展现boeder(因为方式很多，那么我们只能选择适合自己的-也就是用的习惯的)。另外，表格之间还有一个概念是表空间,可以通过给表格设置样式table{ border-collapse:collapse; border-spacing:0;}清除这些多余的空间，那么有了上面的准备工作之后，下面就开始border样式的设置--代码如下：

td,th{border-bottom: 1px solid #e3e3e3;//xia下边框border-right:1px solid #e3e3e3;//有边框}

css表格的边框线怎么设置

border-collapse 属性：设置表格的边框是否被合并为一个单一的边框，即：用于设置表格边框是合并显示还是分开显示。

border-collapse 属性设置表格的边框是否被合并为一个单一的边框。它有以下几个值：

-- separate 默认值：边框会被分开，不会忽略 border-spacing 和 empty-cells 属性；

-- collapse：如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性；

-- inherit：规定应该从父元素继承 border-collapse 属性的值。

双线表格边框的实现

html代码：

table

tr

td内容/tdtd内容/tdtd内容/tdtd内容/tdtd内容/td

/tr

tr

td内容/tdtd内容/tdtd内容/tdtd内容/tdtd内容/td

/tr

tr

td内容/tdtd内容/tdtd内容/tdtd内容/tdtd内容/td

/tr

tr

td内容/tdtd内容/tdtd内容/tdtd内容/tdtd内容/td

/tr

/table

css代码：

table,table td{

text-align: center;

border: 1px solid #000;

border-collapse：separate；

}

table td{

padding: 10px 30px;

}

表格边框的双线样式其实很简单，只要同时设置表格外边框和table里的每个单元格的边框，就可以实现了。

因为separate是默认值，就算是不设置border-collapse：separate；表格也会呈现双线效果。

我们主要是来看看border-collapse属性合并边框，实现单线边框的方法，html代码一样，只需设置css样式：

css代码：

table,table tr td {

border: 1px solid #000;

text-align: center;

border-collapse: collapse;

}table tr td {

padding: 10px 30px;

}

单线边框的实现也很简单，它是在双线样式的基础上，设置border-collapse: collapse;

把相邻的两个table边框合并成一个，使得相邻的两条线并在一起，边框就以单线的形式显示了。

总结：表格边框的无论是单线边框样式，还是双线边框样式都在前端页面中应用广泛，大家可以根据自己