百韵网 >>  正文

table用CSS控制怎么实现 在网页中如何用css+div实现表格效果

来源:www.baiyundou.net   日期:较早时间
你最好给你的table加一个类名。比如<table class="table_A">,<table class="table_B">。
否则你写在一个页面里的两个样式若有重复,则只有后面的定义起作用,例如宽度。
最严重的是,你所画的所有引用该样式的页面的所有table都是一个样子。

第一个:
table.table_A{width:100%;border:none;border-collapse:collapse;}
table.table_A td{border:none;}

第二个:
table.table_B{width:980;margin:auto;border:none;border-collapse:collapse;}
table.table_B td{border:none;}

table中用CSS控制>的宽度和高度,首先我们需要给tr和td一个style,然后通过这个style来控制它的width和height就可以了。把那些控制格式的写在CSS中就可以了,如果CSS是以.定义的就用CLASS;如果是#就用id来调用。

给table加属性id 或者class
.class值
{
css代码
}

#id值
{

}

<style>
*{margin:0;padding:0;}
table{border-collapse:collapse;}
td{text-align:center;border:red solid 1px;}/* border为说明意思,设置了颜色,你可以设置为0*/
</style>

<table>
<tr>
<td>
<table style="width:980px;"><tr><td></td></tr></table>
</td>
</tr>
</table>

css:
table{width:100%;或width:980px; border:none; text-align:center;}
td{padding=0;margin=0;}

试试看

在网页中如何用css+div实现表格效果~

在网页中用css+div实现表格效果,首先我们需要理解的就是div是一个块级元素,可以在里面包裹其他的div,通过给这些div这是不同的高度,宽度,还有一些float属性,就可以实现如同表格一样的布局,具体看代码来理解下:





宽度的学习





导航条


店铺图片


左侧目录


右侧内容


尾区


尾招



Vue实践-CSS样式position/display/float属性对比使用

相关要点总结:

19595393490:Css中控制table单元格的间距
牧美答:1、设置表格的边框。在CSS中,可以通过border来设置表格或单元格的边框及其边框颜色,例如,下面设置表格为1px的蓝色边框。2、在table表格里,默认是显示两个边框线的,如果要设置成一条边框,在CSS中需要使用border-collapse设置为collapse,合并为一条边框。3、CSS设置表格的宽度和高度,使用width宽度和hei...

19595393490:css怎么控制table单双行
牧美答:css控制table单双行的方法是获取到行号。<style type="text/css"> tb tr { background-color: expression(this.sectionRowIndex % 2 == 0 ? "#fff" : "#efefef");TableSelect: expression(this.sectionRowIndex == 0 ? "" :(onmouseover = function(){ this.style.backgroundColor="#69CD...

19595393490:table用CSS控制怎么实现
牧美答:第一个:table.table_A{width:100%;border:none;border-collapse:collapse;} table.table_A td{border:none;} 第二个:table.table_B{width:980;margin:auto;border:none;border-collapse:collapse;} table.table_B td{border:none;}

19595393490:css样式控制表格单元格的距离
牧美答:table {border-spacing: 15px;border-collapse: separate;} 可以应用border-spacing属性设置到表中。border-collapse 默认值为separate,即每个td单元格都有独立的边框;collapse表示相邻单元格共用一个边框,此时 border-spacing 将不起作用,设置为collapse单元格间距将消失。

19595393490:用html table制作一张课表,怎么使用css来调整长宽高和颜色等等_百度知 ...
牧美答:新建一张CSS样式表,如:sytle.css 在css中设置相关标签的样式如:tr td{widht:xxpx; height:xxpx; border:1px solid red; background:yellow;}等等。然后引用这个css样式表即可。希望能帮到你。

19595393490:如何利用CSS控制表格宽度不随插入内容的撑大?(内容不超过DIV高度)设置cs...
牧美答:table中的td如果你不定义宽度,采用默认的方式,那么在你输入内容的时候会发现有内容的占比较大,没内容的占很小,一般标准的,都应该设置宽度,比如td{width:100px;}

19595393490:css怎么控制表格的边框粗细,还要显示线条和颜色
牧美答:可以通过设置单元格元素td的边框样式来实现:border: width style color; /*分别设置边框的粗细、样式和颜色*/示例如下:在HTML代码中给出两个表格 <table class="tb1"><tr><td>有</td><td>志</td><td>者</td></tr><tr><td>事</td><td>竟</td><td>成</td></tr></table><...

19595393490:怎么用CSS设置网页table边框样式
牧美答:1、只对table设置边框 2、对td设置边框 3、对table和td技巧性设置表格边框 4、对table和td设置背景,实现完美表格边框 以下DIVCSS5对以上几种实现html 表格边框样式进行讲解与案例演示。为了便于观察,divcss5均设置所有案例表格为1px实线红色边框为例;table宽度为400px;表格为三列三行,对以上四种情况...

19595393490:用css 控制多行的table(行数不确定),隔行换色 能实现吗?求高手指点
牧美答:用js实现吧,给tr一个id:(document).ready(function() { var objs=$("#tab1 tr");for (var i=0;i<objs.length;i++){ ("#"+objs[i].id).css("background",(i%2==0)? 'red' : 'white');} });如果是不同的颜色,就把颜色放到一个数组里面,在循环中从里面取颜色就行了 ...

19595393490:怎么用css 让整个table位置页面水平居中,
牧美答:需要准备的材料分别有:电脑、chrome浏览器、html编辑器。1、首先,打开html编辑器,新建一个html文件,例如:index.html。2、其次,在index.html中的<style>标签中,输入css代码:table {margin: auto;} body{text-align: center;}。3、最后,浏览器运行index.html页面,此时会发现通过用css让整个...

(编辑:本站网友)
相关推荐
关于我们 | 客户服务 | 服务条款 | 联系我们 | 免责声明 | 网站地图
@ 百韵网