×

显示为表格单元格css代码

显示为表格单元格css代码（使用CSS给表格添加边框的代码问题）

admin admin 发表于2023-05-12 08:19:50 浏览34 评论0

抢沙发发表评论

本文目录

使用CSS给表格添加边框的代码问题


  • 这是因为你css写的问题，你写的css，对所有页面的table标签都加样式了。

  • 解决方案：

    把你添加进去的表格，放在div标签里头，

    《div class=“mystyle“》《table》《/table》(这里是你复制进来的代码)《/div》

    然后你css代码这么写：

    《style type=“text/css“》 
    .mystyle table 
    { 
    border-collapse: collapse; 
    border: none; 
    } 
    .mystyle td 
    { 
    border: solid #000 1px; 
    } 
    《/style》


如何对整个表格包括里面的单元格应用CSS阿具体内详


《!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN“ “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“》
《html xmlns=“http://www.w3.org/1999/xhtml“》
《head》
《meta http-equiv=“Content-Type“ content=“text/html; charset=gb2312“ /》
《title》无标题文档《/title》
《style type=“text/css“》
《!--
.ca {
border: 1px solid #000000;
}
.ca2 {
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #000000;
border-bottom-color: #000000;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #000000;
}
.ca3 {
border-bottom-width: 1px;
border-bottom-style: solid;
border-left-color: #000000;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #000000;
border-bottom-color: #000000;
}
.ca4 {
border-right-width: 1px;
border-right-style: solid;
border-right-color: #000000;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #000000;
}
--》
《/style》
《/head》
《body》
《table width=“200“ border=“0“ cellpadding=“0“ cellspacing=“0“ 》
《tr》
《td class=“ca“》 《/td》
《td class=“ca2“》 《/td》
《td class=“ca2“》 《/td》
《td class=“ca2“》 《/td》
《td class=“ca2“》 《/td》
《/tr》
《tr》
《td class=“ca3“》 《/td》
《td class=“ca4“》 《/td》
《td class=“ca4“》 《/td》
《td class=“ca4“》 《/td》
《td class=“ca4“》 《/td》
《/tr》
《tr》
《td class=“ca3“》 《/td》
《td class=“ca4“》 《/td》
《td class=“ca4“》 《/td》
《td class=“ca4“》 《/td》
《td class=“ca4“》 《/td》
《/tr》
《tr》
《td class=“ca3“》 《/td》
《td class=“ca4“》 《/td》
《td class=“ca4“》 《/td》
《td class=“ca4“》 《/td》
《td class=“ca4“》 《/td》
《/tr》
《tr》
《td class=“ca3“》 《/td》
《td class=“ca4“》 《/td》
《td class=“ca4“》 《/td》
《td class=“ca4“》 《/td》
《td class=“ca4“》 《/td》
《/tr》
《/table》
《/body》
《/html》

用CSS怎么把表格显示出来


CSS中显示和隐藏有多种方法，比较常见的是有display:none|block;visibility: hidden|visible;他们的区别在于，对文档流影响的区别。一般大家显示隐藏元素，比较倾向于用display。
你如果想隐藏表格，可以用table{display:none;}来操作。想显示的话把display:block即可。

CSS表格 单元格占两行


CSS表格单元格占两行可以参考以下的代码：

《!-- 这是占两行的 --》

《table border=1》

《tr》《td rowspan=“2“》单元格占两行的《/td》《td》......《/td》《/tr》

《tr》《td》....《/td》《tr》

《/table》

《!-- 这是占两列的 --》

《table border=1》

《tr》《td colspan=“2“》单元格占两列的《/td》《/tr》

《tr》《td》..........《/td》《td》..........《/td》《tr》

《/table》

扩展资料：

CSS 表格属性

表格边框

如需在 CSS 中设置表格边框，请使用 border 属性。

下面的例子为 table、th 以及 td 设置了蓝色边框：

table, th, td

{

border: 1px solid blue;

}

请注意，上例中的表格具有双线条边框。这是由于 table、th 以及 td 元素都有独立的边框。

如果需要把表格显示为单线条边框，请使用 border-collapse 属性。

折叠边框

border-collapse 属性设置是否将表格边框折叠为单一边框：

table

{

border-collapse:collapse;

}

table,th, td

{

border: 1px solid black;

}

参考资料来源：百度百科-CSS表格


如何用CSS 定制表格单元格的宽度和高度


CSS中宽度和高度分别可以通过width和height实现，那么对于单元格的宽度和高度，则可以通过如下样式来设置

td{ width:100px; height:50px;} /*设置单元格宽度100px，高度50px*/

示例如下：

  1. 给出HTML元素

    《table》
    《tr》《td》1《/td》《td》2《/td》《td》345《/td》《/tr》
    《tr》《td》6789《/td》《td》10《/td》《td》11《/td》《/tr》
    《/table》

  2. 设置单元格高度和宽度样式

    table{border-collapse:collapse;}
    td{
    border: 1px solid green; /*边框*/
    width:100px;             /*单元格宽度*/
    height:50px;             /*单元格高度*/
    text-align:center;       /*单元格文字居中对齐*/
    }

  3. 效果如下


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


在网页中用css+div实现表格效果，首先我们需要理解的就是div是一个块级元素，可以在里面包裹其他的div，通过给这些div这是不同的高度，宽度，还有一些float属性，就可以实现如同表格一样的布局，具体看代码来理解下:
《!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN“ “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“》
《html xmlns=“http://www.w3.org/1999/xhtml“》
《head》
《meta http-equiv=“Content-Type“ content=“text/html; charset=utf-8“ /》
《link rel=“stylesheet“ type=“text/css“ href=“CSS-kuaidu.css“/》
《title》宽度的学习《/title》
《/head》

《body》
《div style=“width:960px; height:700px; margin:0 auto; border:solid 1px #999999“ 》
《div style=“width:960px; height:25px; border:solid 1px #CCCCCC;“》
导航条
《/div》
《div style=“width:960px; height:80px; border:solid 1px #CCCCCC;“》
店铺图片
《/div》
《div style=“width:200px; height:400px; border:solid 1px #CCCCCC; float:left;“》
左侧目录
《/div》
《div style=“width:750px; height:400px; border:solid 1px #CCCCCC; float:right;“》
右侧内容
《/div》
《div style=“width:960px; height:17px; border:solid 1px #CCCCCC; float:left;“》
尾区
《/div》
《div style=“width:960px; height:173px; border:solid 1px #CCCCCC; float:left;“》
尾招
《/div》
《/div》
《/body》
《/html》

谁可以给我一个用CSS做好的表格代码啊最好是两行四列的


《html xmlns=“http://www.w3.org/1999/xhtml“》
《head》
《meta http-equiv=“Content-Type“ content=“text/html; charset=utf-8“ /》
《title》用CSS做表格《/title》
《style type=“text/css“》
ul{padding:0;
width:324px; /*设置表格宽 */
height:42px; /*设置表格高*/
margin:30px;
border-top:red 1px solid; /*设置表格上边框*/
border-right:red 1px solid; /*设置表格右边框*/
}
li{ border-left:red 1px solid; /*设置表格左边框*/
border-bottom:red 1px solid;/*设置表格下边框*/
/*设置单元格边框*/
list-style:none; /*清除项目列表前的标记*/
float:left; /*设置单元格浮动，用于水平排列*/
display:block; /*设置单元格为块级元素于用语控制大小等*/
width:80px; /*设置单元格宽*/
height:20px; /*设置单元格高*/
text-align:center; /*设置单元格内文本对齐方式*/
}

/*原理就是利用项目列表的每个项目做出表格中的每个单元格，然后通过设置ul和li的边框达到设置表格的边框效果*/
《/style》
《/head》
《body》
《ul》
《li》表格《/li》
《li》表格《/li》
《li》表格《/li》
《li》表格《/li》
《li》表格《/li》
《li》表格《/li》
《li》表格《/li》
《li》表格《/li》
《/ul》
《/body》
《/html》
我都做了注释了,你复制到记事本中,改下后缀名,打开看下效果!
如果懂CSS的话一看就明白了

css 样式表 控制li标签 并成表格显示


div弄个边框
li浮动
a设为块元素并加宽度、行高，文字居中对齐
然后想办法用合适的方式清除下浮动，以免div包不住那些东西

如果上面的你都能自己动手解决了，最下面那个 显示全部 我想你也应该能想出办法来了。

不要看别人现成的代码，步骤就是上面那样，自己动手搞懂一次，比你看几百个别人现成的答案都有效，否则下次你还是不会任何东西。

怎样通过css样式显示和隐藏表格


CSS中显示和隐藏有多种方法，比较常见的是有display:none|block;visibility: hidden|visible;他们的区别在于，对文档流影响的区别。一般大家显示隐藏元素，比较倾向于用display。
你如果想隐藏表格，可以用table{display:none;}来操作。想显示的话把display:block即可。

设计一个表格 HTML CSS 代码给我就行


《!doctype html》
《html lang=“en“》
    《head》
        《meta charset=“UTF-8“》
        《title》Document《/title》
    《/head》
    《style》
        td{ width: 300px; height: 50px; border: 1px #000 solid; text-align: center; color: #fff;}
        tr:nth-child(2n+1){ background: #2CAEDB;}
        tr:nth-child(2n){ background: red;}
    《/style》
    《body》
        《table cellpadding=“0“ cellspacing=“0“ style=“border-collapse:collapse“》
            《tr》
                《td》XXXXXXXXXXXXXXXXXXXX《/td》
                《td》XXXXXXXXXXXXXXXXXXXX《/td》
            《/tr》
             《tr》
                《td》XXXXXXXXXXXXXXXXXXXX《/td》
                《td》XXXXXXXXXXXXXXXXXXXX《/td》
            《/tr》
             《tr》
                《td》XXXXXXXXXXXXXXXXXXXX《/td》
                《td》XXXXXXXXXXXXXXXXXXXX《/td》
            《/tr》
            《tr》
                《td》XXXXXXXXXXXXXXXXXXXX《/td》
                《td》XXXXXXXXXXXXXXXXXXXX《/td》
            《/tr》
             《tr》
                《td》XXXXXXXXXXXXXXXXXXXX《/td》
                《td》XXXXXXXXXXXXXXXXXXXX《/td》
            《/tr》
             《tr》
                《td》XXXXXXXXXXXXXXXXXXXX《/td》
                《td》XXXXXXXXXXXXXXXXXXXX《/td》
            《/tr》
            《tr》
                《td》XXXXXXXXXXXXXXXXXXXX《/td》
                《td》XXXXXXXXXXXXXXXXXXXX《/td》
            《/tr》
             《tr》
                《td》XXXXXXXXXXXXXXXXXXXX《/td》
                《td》XXXXXXXXXXXXXXXXXXXX《/td》
            《/tr》
        《/table》
    《/body》
《/html》