记录下: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 ...
随机推荐
- 【JAVA系列】Google爬虫如何抓取JavaScript的？
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[JAVA系列]Google爬虫如何抓取Java ...
- 【GNN】图神经网络小结
图神经网络小结 图神经网络小结 图神经网络分类 GCN: 由谱方法到空域方法 GCN概述 GCN的输出机制 GCN的不同方法 基于谱方法的GCN 初始 切比雪夫K阶截断: ChebNet 一阶Cheb ...
- CentOS7之root密码破解
1.重新启动Linux系统,在出现引导界面时上下移动光标选择第一引导项,按下键盘的“e”键进入内核编辑界面,如图所示: 2.找到linux16参数这一行,按住“Ctrl+e”组合键跳转到行尾,添加rd ...
- Luogu P2572 序列操作
(是道线段树好题√) 题目链接 题外话:这道题我也不知道卡了自己多少天,从初赛之前就开始做,一直到现在才a掉(时间跨度得有将近十天了吧?) 线段树,嗯,好像很简单的样子. 但事实上因为自己太菜了,卡了 ...
- Vue组件学习（转载）
什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTM ...
- 常见SMT极性元器件识别方法
极性元件在整个PCBA加工过程中需要特别注意,因为方向性的元件错误会导致批量性事故和整块PCBA板的失效,因此工程及生产人员了解SMT极性元件极为重要. 1.片式电阻(Resistor)无极性 2.电 ...
- 【应用容器引擎】Docker笔记
一.Docker是什么? Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的linux机器上,也可以实现虚拟化.它是一个轻量级容器技 ...
- 2019-11-29-VisualStudio-2019-尝试使用-C#-8.0-新的方式
title author date CreateTime categories VisualStudio 2019 尝试使用 C# 8.0 新的方式 lindexi 2019-11-29 08:41: ...
- docker inspect命令查看镜像详细信息
使用 inspect 命令查看镜像详细信息,包括制作者.适应架构.各层的数字摘要等. # docker inspect --help Usage: docker inspect [OPTIONS] N ...
- 关于ftp无法链接的情况
首先查看ftp是否安装 systemctl status vsftpd 如果没有先安装 yum install vsftpd 然后启动 systemctl start vsftpd 如果有报错 Job ...