2 oiu1010110 oiu1010110 于 2016.04.25 13:34 提问

table用rowspan合并行后,单双行颜色问题,谢谢指导。
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/count.css">
</head>
<body>
<h1>our count</h1>
<p><img src="" alt=""></p>
<p>this is our count,i am very happy!</p>
    <table>
        <caption>The Count</caption>
        <tr>
            <th>City</th>
            <th>Date</th>
            <th>Temperature</th>
            <th>Altitude</th>
            <th>Population</th>
            <th>Diner Rating</th>
        </tr>
        <tr>
            <td>WA</td>
            <td>June 15th</td>
            <td>75</td>
            <td>1204ft</td>
            <td>29686</td>
            <td>4/5</td>
        </tr>
        <tr>
            <td>ID</td>
            <td>June 25th</td>
            <td>74</td>
            <td>204ft</td>
            <td>2968</td>
            <td>3/5</td>
        </tr>
        <tr>
            <td>UT</td>
            <td>July 10th</td>
            <td>75</td>
            <td>1204ft</td>
            <td>29686</td>
            <td>4/5</td>
        </tr>
        <tr>
            <td>CO</td>
            <td>July 23rd</td>
            <td>75</td>
            <td>124ft</td>
            <td>2986</td>
            <td>4/9</td>
        </tr>
        <tr>
            <td rowspan="2">NM</td> <!--  表示这一列,两行合并 -->
            <td>August 9th</td>
            <td>75</td>
            <td rowspan="2">104ft</td>
            <td rowspan="2">29686</td>
            <td>1/5</td>
        </tr>
        <tr>

            <td>August 27th</td>
            <td>85</td>


            <td>
                <table>
                    <tr>
                        <th>Tess</th>
                        <td>5/5</td>
                    </tr>
                    <tr>
                        <th>Tony</th>
                        <td>4/5</td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>AZ</td>
            <td>August 18th</td>
            <td>175</td>
            <td>120ft</td>
            <td>2966</td>
            <td>3/5</td>
        </tr>
    </table>
</body>
</html>

css代码:
*{
    padding: 0px;
    margin: 0px;
}
body{
    width: 1024px;
}
p,h1{
    text-align: center;
}

table{
    width:80%;
    margin: 5% auto ;
    border: thin solid black;
    caption-side: bottom;
/*  border-spacing: 0px; */
    border-collapse: collapse;
}

td,th{
    border: 1px dotted gray;
    padding: 5px;
    margin: 0px;
}
caption{
    font-style: italic;
    padding-top: 8px;
}
th{
    background-color: #cc6600;
}
/* .cellcolor{
    background-color: #fcba7a;
} */

tr:nth-child(2n){
    background-color: beige;
}
tr:nth-child(2n+1){
    background-color: fcba7a;
}
table table th{
    background-color: white;
}

//这样合并的地方的一行出现的颜色不是想要的,怎么解决呢?有没有不用在单独给这些地方设置样式的方法呢?

1个回答

showbo
showbo   Ds   Rxr 2016.04.25 14:08
已采纳

手动控制,不要用子nth-child这种选择器,定义2个样式来切换

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>

*{
    padding: 0px;
    margin: 0px;
}
body{
    width: 1024px;
}
p,h1{
    text-align: center;
}

table{
    width:80%;
    margin: 5% auto ;
    border: thin solid black;
    caption-side: bottom;
/*  border-spacing: 0px; */
    border-collapse: collapse;
}

td,th{
    border: 1px dotted gray;
    padding: 5px;
    margin: 0px;
}
caption{
    font-style: italic;
    padding-top: 8px;
}
th{
    background-color: #cc6600;
}
/* .cellcolor{
    background-color: #fcba7a;
} */

tr.odd{
    background-color: beige;
}
tr.even{
    background-color:#fcba7a;
}
table table th{
    background-color: white;
}
    </style>
</head>
<body>
    <h1>our count</h1>
    <p><img src="" alt=""></p>
    <p>this is our count,i am very happy!</p>
    <table>
        <caption>The Count</caption>
        <tr>
            <th>City</th>
            <th>Date</th>
            <th>Temperature</th>
            <th>Altitude</th>
            <th>Population</th>
            <th>Diner Rating</th>
        </tr>
        <tr class="odd">
            <td>WA</td>
            <td>June 15th</td>
            <td>75</td>
            <td>1204ft</td>
            <td>29686</td>
            <td>4/5</td>
        </tr>
        <tr class="even">
            <td>ID</td>
            <td>June 25th</td>
            <td>74</td>
            <td>204ft</td>
            <td>2968</td>
            <td>3/5</td>
        </tr>
        <tr class="odd">
            <td>UT</td>
            <td>July 10th</td>
            <td>75</td>
            <td>1204ft</td>
            <td>29686</td>
            <td>4/5</td>
        </tr>
        <tr class="even">
            <td>CO</td>
            <td>July 23rd</td>
            <td>75</td>
            <td>124ft</td>
            <td>2986</td>
            <td>4/9</td>
        </tr>
        <tr class="odd">
            <td rowspan="2">NM</td> <!--  表示这一列,两行合并 -->
            <td>August 9th</td>
            <td>75</td>
            <td rowspan="2">104ft</td>
            <td rowspan="2">29686</td>
            <td>1/5</td>
        </tr>
        <tr class="odd">

            <td>August 27th</td>
            <td>85</td>


            <td>
                <table>
                    <tr>
                        <th>Tess</th>
                        <td>5/5</td>
                    </tr>
                    <tr>
                        <th>Tony</th>
                        <td>4/5</td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr class="even">
            <td>AZ</td>
            <td>August 18th</td>
            <td>175</td>
            <td>120ft</td>
            <td>2966</td>
            <td>3/5</td>
        </tr>
    </table>
</body>
</html>
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
关于table边框,单元格合并的问题
关于table边框,单元格合并的问题最近遇到很多table表格的页面,table单元格的双边框及其单元格的合并问题还是挺重要的。
bootstraptable 合并行数据并居中对齐
渲染表格后进行数据行合并,垂直居中对齐
table合并单元格colspan和rowspan
起因    最近要实现一个成绩分析的功能,最终是要呈现到Word中的,一开始想到的使用报表显示,但是得有单独的数据库表来存储这些数据,如果说项目是刚开始做的话,倒也好说,不过现在项目已经进入了后期,在新建数据库表就有点不现实了,因此就jsp界面手画table了。但是在画table的过程中遇到一个问题,有些单元格是合并的,那么怎么来合并单元格呢?解决方案colspan & rowspan    c
CSS控制表格单双行变色
CSS控制表格单双行变色,实现JS效果
【HTML】table表格拆分合并(colspan、rowspan)
代码演示 横向合并:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UT
使用JavaScript实现动态创建含合并单元格(行)的表单
在HTML DOM中,Table中的行数据是可以通过JavaScript的函数方法insertRow(index)动态增加的,通过insertCell(index)增加单元格。 其中,比较麻烦的是合并单元格,这里以行合并为例,使用rowspan属性的设置来实现,关键点是insertRow(index)和insertCell(index)中index值,也就是合并单元格的时候,index顺序发生的变化。
vue 合并表格行
border="1" width="500px" style="height: 400px;margin-right: 200px;"> 颜色分类 尺寸 v-for="item in dataList"> :rowspan="item.ptSpecificationValueData.le
一个好看的 html css table表格 ,单双行变色
地址 https://yq.aliyun.com/ziliao/99760?spm=5176.8246799.blogcont.18.ZGx39m CSS Tables /* CSS Document */ body { font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif
BootstrapTable 插件合并单元格
BootstrapTable 插件合并单元格客户端运用bootstrapTable 的mergeCells属性合并单元格来达到报表分析展示的直观效果JavaScript代码声明mergeCells函数,如:/** * 合并单元格 * @param data 原始数据(在服务端完成排序) * @param fieldName 合并属性名称 * @param colspan 合并列 *
jquery datatables rowspan和colspan 出错
这两天使用jquerydatatables插件时出现了点问题,在使用类似于的单元格时datatables直接挂掉,控制台出现 的错误,一开始还纳闷为何这样优秀的一个插件竟然不支持合并单元格,后来查阅官方文档也无果(官方只提供复杂表头的示例,即表头中的colspan效果)。 纠结了半天,终于发现了原因:datatables在初始化表格时单元格数量有错(一般我们在写rowspan=”3”时