下面来个例子,你可以复制到你的编辑器里修改测试
赫章网站制作公司哪家好,找创新互联!从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设等网站项目制作,到程序开发,运营维护。创新互联2013年开创至今到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联。
style type="text/css"
table.gridtable {}{
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
table.gridtable th {}{
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
table.gridtable td {}{
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
/style
!-- Table goes in the document BODY --
table class="gridtable"
tr
thInfo Header 1/ththInfo Header 2/ththInfo Header 3/th
/tr
tr
tdText 1A/tdtdText 1B/tdtdText 1C/td
/tr
tr
tdText 2A/tdtdText 2B/tdtdText 2C/td
/tr
/table
CSS(层叠样式表)级联样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
需要准备的材料分别有:电脑、浏览器、html编辑器。
1、首先,打开html编辑器,新建html文件,例如:index.html,编写问题基础代码。
2、在index.html中的style标签中,输入css代码:td {padding: 0}。
3、浏览器运行index.html页面,此时成功用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,单元格左边没有边框,上下和右边有边框,颜色你可以自己设置。
用ID吧
#table01{width:88%}
#table02{width:100%}
table id="table01"//这是第一个表格
table id="table02"//这是第二个表格
想应用更多不同样式的表格就另外在CSS设置 注意ID属性是唯一的
这是设置的边框,将边框的样式设置为 dashed就行,举个例子:
table{
width: 320px;
height: 320px;
}
tr td{
border:1px dashed #333;
}
可以这样写
1、td 的边框和table 的边框重叠
.table { border-left:1px solid #dedede; border-top:1px solid #dedede;}
.td { border-right:1px solid #dedede; border-bottom:1px solid #dedede;}
table 只用左边框和上边框,每个td只有右边框和下边框,效果就是整个表格左、上边框是连续实线,右、下边框是延续td的边框所以是断断续续的
解决方法:
.table {border:1px solid #dedede; border-collapse:collapse;}
.td {border:1px solid #dedede; } 橘色字体是关键,边框设置也不用分上下左右了,重叠的话会一个覆盖另一个
firefox中:td的border覆盖table 的,IE中table 的border覆盖td的,我这里border颜色一样,无所谓了
表格线常见问题:
1.表格边框与表格单元格线的重叠。[采用border-collapse:collapse解决]
2.嵌套表格与被嵌套表格边线重叠问题。[采用border-top|left|right|bottom解决]
3.嵌套表格与被嵌套表格对不齐的问题。[采用table-layout: fixed;解决]
4.border-collapse有两个属性,separate 和 collapse 。
separate是默认属性,表格边框默认有1px 的间隙,在表格排版时代,设置好表格背景色,我们曾用它来挤出版块的外边框;
collapse,是将表格边框的间隙去掉,这样给表格的td边框赋值时就不会产生双线框了。
Demo:没有设置collapse属性的双线表格