记录下: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课堂疑问解答与思考1
问题一 Java类中只能有一个公有类吗?用Eclipse检测以下程序是否正确.是否在接口中同样适用. 答:一个源文件里必须稚嫩发有一个公有类,名称必须与文件名一致.以上程序经过编译没有提示错误.jav ...
- vue--键盘修饰符以及自定义键盘修饰符
键盘修饰符以及自定义键盘修饰符 1.vue键盘修饰符[了解即可] 地址:https://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E4 ...
- 小记---------网页之htmlunit
HtmlUnit是一款开元的Java页面分析工具,可以有效的使用htmlunit分析页面大汉的内容,项目可以模拟浏览器运行,被誉为Java浏览器的开元实现,这个没有界面的浏览器 API的使用 ...
- Python自学
print("\u4e2d\u56fd\") 报错,语法错误 修改,去掉尾部的\,正确 import datetimeprint("now:"+datetime ...
- Git-版本控制 (三)
前面两篇我们成功安装了Git,并且成功创建了我们的版本库. 创建了版本库,怎么可以不往里面放内容呢,所以今天的任务就是学会将文件放入至我们的版本库中...... 首先,我们点开我们的"Git ...
- Vue中的组件直接的通信是如何实现的
组件关系可分为父子组件通信.兄弟组件通信 1.父组件传子组件 通过props属性来实现 2.子组件传父组件 子组件用$emit()来触发事件,父组件用$on()来监听子组件的事件 3.兄弟之间的通信 ...
- ES中的查询操作
1.前缀查询 先输入数据: PUT /my_index/address/ { "postcode": "W1 3DG" } PUT /my_index/addr ...
- css练习小总结
1.div水平居中:/*设置div宽度后,margin:0 auto:*/2.div显示在一行:/*float:left:*/ 3.text-align:/*后面标签里的内容水平居中:*/4.alig ...
- HTTP 缓存简单了解
HTTP 缓存简单了解.文章整理了相关资料,记录了部分实践.方便大家轻松了解缓存.能回答上三个问题,HTTP缓存就算理解呢.能否缓存?缓存是否过期?协商缓存? 概要: web缓存 缓存的处理 前端解决 ...
- 使用vue-cli脚手架快速构建项目
1.创建一个文件夹,vscode打开 2.ctr + shift+` 打开指令窗口 3.npm i vue-cli -g 安装vue-cli 4.vue -V 测试安装版本 检查是否安装成功 5. ...