记录下: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 ...
随机推荐
- Linux man及echo的使用
学习目标: 通过本实验掌握man和echo两个命令的用法. 实验步骤: 1.通过man查询ls的详细用法,后面可以跟哪些参数,每个参数的作用.这里主要查找如何禁止ls彩色结果输出. 2.把查找到的参数 ...
- [转帖]浅谈IOC--说清楚IOC是什么
浅谈IOC--说清楚IOC是什么 Need Study https://www.cnblogs.com/DebugLZQ/archive/2013/06/05/3107957.html 博文目录 1. ...
- 来自 Vue 3.0 的 Composition API 尝鲜
来自 Vue 3.0 的 Composition API 尝鲜:https://segmentfault.com/a/1190000020205747
- PostgreSQL-事务与commit优化
基本概念 事务 Transaction 是 数据库管理系统DBMS 执行过程中的一个逻辑单元,是一个 sql命令组成的序列. 其特点在于,当事务被提交DBMS后,DBMS需要确保所有的操作被完成:如果 ...
- HDUST-1245 Interpreter(模拟)
1245: Problem E: Interpreter 时间限制: 1 Sec 内存限制: 128 MB提交: 4 解决: 2[提交][状态][讨论版] 题目描述 Problem E: Inte ...
- str 小列题
name = " aleX leNb "#2.有变量 完成如下操作: 移除 name 变量对应的值两边的空格,并输出处理结果 name=name.strip() print(nam ...
- oracle 常用查询语句
一.一般日常用的脚本 1.检查源库每个节点至少3组redoselect group#,thread#,bytes/1024/1024,members,status from v$log; select ...
- JS 一位数左边补零
- kali下纯文本与窗口环境切换
切到纯文本环境,想返回 试了半天ctrl+alt+f7不行, 最后我想试试ctrl+alt+f8竟然成了: 而且那是之前以root账户登录图像界面时切换回去是f8,普通用户是f9 ,为何如此,我还不 ...
- iptables-restore - 恢复 IP Tables
总览 SYNOPSIS iptables-restore [-c] [-n] 描述 DESCRIPTION iptables-restore 用来从 STDIN 给出的数据中恢复 IP Tables. ...