记录下: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 ...
随机推荐
- 【Deep Learning Nanodegree Foundation笔记】第 0 课：课程计划
第一周 机器学习的类型,以及何时使用机器学习 我们将首先简单介绍线性回归和机器学习.这将让你熟悉这些领域的常用术语,你需要了解的技术进展,并了解深度学习在更大的机器学习背景中的位置. 直播:线性回归 ...
- selenium学习-模拟键盘按键操作
导入 from selenium.webdriver.common.keys import Keys 格式:Keys.XXX 一般这么用:send_keys(Keys.XXX) # coding= ...
- python的并发GIL 了解
gil 又称 global interpreter lock (全局解释器锁) #python 中一个线程对应于c语言中的一个线程 #gil使得同一个时刻只有一个线程在一个cpu上执行字节码,无法将 ...
- python 并发编程 多路复用IO模型
多路复用IO(IO multiplexing) 这种IO方式为事件驱动IO(event driven IO). 我们都知道,select/epoll的好处就在于单个进程process就可以同时处理多个 ...
- mac os cmake安装
1.下载安装程序,地址为 http://www.cmake.org/download/,下载 Unix/Linux Source (has \n line feeds) cmake-3.0.2.tar ...
- JavaScript中：地址引用的特性，导致静态初始值被修改
问题分类 JavaScript,值引用,地址引用 问题描述 开发过程中,服务端将静态配置数据从mysql数据库中读取到内存中,方便调用. 在实现流派功能时,需从数据库中读取流派种类数据到内存中,由于其 ...
- 使用fiddler 抓包app 网络连接不上的原因
https://blog.csdn.net/m0_37554415/article/details/80434477· 设置完记得关掉fiddler 重启 基于fiddler 4 windown 10 ...
- Spring Data Elasticsearch基本使用
目录 1. 创建工程 2. 配置application.yaml文件 3. 实体类及注解 4. 测试创建索引 5. 增删改操作 5.1增加 5.2 修改(id存在就是修改,否则就是插入) 5.3 批量 ...
- HNUSTOJ-1674 水果消除(搜索或并查集)
1674: 水果消除 时间限制: 2 Sec 内存限制: 128 MB提交: 335 解决: 164[提交][状态][讨论版] 题目描述 “水果消除”是一款手机游戏,相信大家都玩过或玩过类似的游戏 ...
- 图数据库：AgensGraph
文章目录 AgensGraph简介 官网及下载 安装AgensGraph 上传并解压 添加agens用户 配置.bashrc 初始化并启动 初始化数据库 启动数据库 执行交互式终端 图数据库基础概念 ...