记录下:nth-child在table中遇到的问题~（已解决）
首先做了一个表格，如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.t-table{
width: 200px;
}
</style>
</head>
<body>
<div>
<table class="t-table" border="1px solid #000" cellpadding="0" cellspacing="0">
<thead>
<th>first</th>
<th>second</th>
<th>third</th>
<th>fourth</th>
</thead>
<tr>
<td rowspan="3">1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
</table>
</div>
</body>
</html>
在页面效果如下：
现在有一个很重要的需求，要求 third 和 fourth 两列居中。
考虑使用 :nth-child() 给一个 text-align:center 来控制
于是加了一段 css 样式如下：
<style type="text/css">
.t-table{
width: 200px;
}
.t-table td:nth-child(2){
text-align: center;
}
</style>
希望第二列居中，
浏览器展示如下：
发现居然错位了！！ 很难过。。。
想了想应该是 rowspan 导致第2、3行的第一列没有，即从 second 开始为第一列！
知道原因以后只能放弃 :nth-child 考虑给第二列开始给一个 class，再用兄弟选择器实现。。
页面代码如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.t-table{
width: 200px;
}
.t-td,
.t-td ~td
{
text-align: center;
}
</style>
</head>
<body>
<div>
<table class="t-table" border="1px solid #000" cellpadding="0" cellspacing="0">
<thead>
<th>first</th>
<th>second</th>
<th>third</th>
<th>fourth</th>
</thead>
<tr>
<td rowspan="3">1</td>
<td class="t-td">2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td class="t-td">5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td class="t-td">8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td class="t-td">12</td>
<td>13</td>
<td>14</td>
</tr>
</table>
</div>
</body>
</html>
展示效果如下：
记录下:nth-child在table中遇到的问题~（已解决）的更多相关文章
- Ubuntu下ibus在firefox浏览器中选中即删除的解决办法
Ubuntu上的firefox更新到36版后,ibus在浏览器中输入中文时选中的文字就会被删除.这个问题在很多贴吧.论坛上也有讨论,不过很多方法都无效.最简单有效的办法就是在命令行输入 ibus-se ...
- 关于NGINX下开启PHP-FPM 输出PHP错误日志的设置(已解决)
最近在本地搭建的LNMP的开发环境.为了开发的时候不影响前端的正常开发就屏蔽的PHP里面php.ini中的一些错误提示.但是这样一来,就影响到了后端开发的一些问题比如不能及时调试开发中的一些问题. n ...
- 怎么在Centos7 下让我的mariadb开机启动？（已解决)
以前我经常使用syscemctl工具在开机后执行 systemctl start mariadb (哈哈,打得可6,只是有点儿麻烦), 如果能开机自启动mariadb就好了. 所以,我想百度下看什么命 ...
- 无法启动此程序,因为计算机中丢失api-ms-win-crt-runtime-l1-1-0.dll已解决
问题 : 无法启动此程序,因为计算机中丢失api-ms-win-crt-runtime-l1-1-0.dll 解决 1, 首先把C:\Windows\SysWOW64\的api-ms-win-crt- ...
- asp:UpdatePanel中js失效问题已解决
1.js function textSAll(o) { o.select(); } var dddd_dd = function () { $(":text").on(" ...
- Jquery 表格操作，记录分页情况下，每一页中被用户勾选的信息
如下图,一个分页列表,用户可以随意勾选一条或多条信息,然后进行某种操作,如“提交”.但是有个问题:如果勾选了一条信息之后,点[下一页],那么上一页 勾选的条目被刷新掉了. 问题:如果用户需要在第1页, ...
- 记录下项目中常用到的JavaScript/JQuery代码二（大量实例）
记录下项目中常用到的JavaScript/JQuery代码一(大量实例) 1.input输入框监听变化 <input type="text" style="widt ...
- 记录下项目中常用到的JavaScript/JQuery代码一（大量实例）
一直没有系统学习Javascript和Jquery,每次都是用到的时候去搜索引擎查,感觉效率挺低的.这边把我项目中用的的记录下,想到哪写哪,有时间再仔细整理. 当然,由于我主要是写后端java开发,而 ...
- vb.net 使用 Regex Replace 正则 替换 Html字串的table中tbody第一个tr下的td为th
本次示例效果如下: TextBox1中输入如下字符串: 12<table><tbody><tr><td>1<br/>11</td> ...
- 记录下mybatis中#{}和${}传参的区别
最近在用mybatis,之前用过ibatis,总体来说差不多,不过还是遇到了不少问题,再次记录下, 比如说用#{},和 ${}传参的区别, 使用#传入参数是,sql语句解析是会加上"&quo ...
随机推荐
- upd通讯Recvfrom设置阻塞不起作用
把自己踩到的坑记录一下,在做UDP通讯的时候,发现自己的程序没有收数据居然也有百分之十二的cpu占用率,通过性能分析工具了解到时recvfrom函数一直在执行,虽然设置阻塞并且确认成功了, ;//阻塞 ...
- Alias sample(别名采样)
应用场景:加权采样,即按照随机事件出现的概率抽样 具体算法: 举例如上,随机事件出现的概率依次是1/2,1/3,1/12,1/12;记随机事件的个数为N,则所有事件概率乘以N后概率为2,4/3,1/3 ...
- Autumn is deep, alas! I stand on the grass in the shadow of the evergreen trees.
essence. n. 本质 flush.n. 脸红 v. 刷洗 initiate.v.开始 intrinsic.固执的 mainfest.a.显然的 intuition.n.直觉上的 refrain ...
- Nginx配置与使用
一.简单介绍 由俄罗斯程序员IgorSysoev研发,2004年开源公布,特点是:内存cpu占用低,并发能力强,稳定,配置示例,反向代理:互联网企业 70%以上公司都在使用 nginx: 二.安装 1 ...
- FTP服务器的搭建(CentOS 7)
注意ip地址为: 虚拟机ip设置 TYPE="Ethernet"BOOTPROTO="static"NAME="enp0s3"DEVICE= ...
- SPOJ 4003 Phone List 题解
题面 啊~,很水的一道trie树模板题: 当两个串存在关系时情况有两种: 若当前串插入后没有任何新建节点,则该串肯定是之前插入的某个串的前缀: 若在插入的时候,有某个经过的节点带有某串结尾的标记,则之 ...
- 记一次神奇的codeforces
今天有一场codeforces的div3,时间挺合适,于是就想打.结果发现rating超过1600就不能报名.虽然shzr好久不打CF了而且很菜,但是毕竟还是到了1600的,于是和ZUTTER_一起用 ...
- 云服务器linux重新挂载指定目录（非扩充）
新买的香港云服务器,系统只能在商家的控制台上安装. 系统和硬盘分开的,根目录空间只有10G.需要重新设置相关目录的大小,如:/usr./var./home等. 以下是自己的解决方法小计. 一.初始的分 ...
- Android 调用摄像头功能【拍照与视频】
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/ma_hoking/article/details/28292973 应用场景: 在Android开发 ...
- having函数，case when与order by
having:用于筛选分组后的各组数据.聚合函数,和group by一起使用(where不能和聚合函数使用)group by放在order by前使用,放在之后报错SELECT user_id fro ...