首先做了一个表格，如下：

<!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中遇到的问题~（已解决）的更多相关文章

  1. Ubuntu下ibus在firefox浏览器中选中即删除的解决办法

    Ubuntu上的firefox更新到36版后,ibus在浏览器中输入中文时选中的文字就会被删除.这个问题在很多贴吧.论坛上也有讨论,不过很多方法都无效.最简单有效的办法就是在命令行输入 ibus-se ...

  2. 关于NGINX下开启PHP-FPM 输出PHP错误日志的设置(已解决)

    最近在本地搭建的LNMP的开发环境.为了开发的时候不影响前端的正常开发就屏蔽的PHP里面php.ini中的一些错误提示.但是这样一来,就影响到了后端开发的一些问题比如不能及时调试开发中的一些问题. n ...

  3. 怎么在Centos7 下让我的mariadb开机启动？（已解决)

    以前我经常使用syscemctl工具在开机后执行 systemctl start mariadb (哈哈,打得可6,只是有点儿麻烦), 如果能开机自启动mariadb就好了. 所以,我想百度下看什么命 ...

  4. 无法启动此程序,因为计算机中丢失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- ...

  5. asp:UpdatePanel中js失效问题已解决

    1.js function textSAll(o) { o.select(); } var dddd_dd = function () { $(":text").on(" ...

  6. Jquery 表格操作，记录分页情况下，每一页中被用户勾选的信息

    如下图,一个分页列表,用户可以随意勾选一条或多条信息,然后进行某种操作,如“提交”.但是有个问题:如果勾选了一条信息之后,点[下一页],那么上一页 勾选的条目被刷新掉了. 问题:如果用户需要在第1页, ...

  7. 记录下项目中常用到的JavaScript/JQuery代码二（大量实例）

    记录下项目中常用到的JavaScript/JQuery代码一(大量实例) 1.input输入框监听变化 <input type="text" style="widt ...

  8. 记录下项目中常用到的JavaScript/JQuery代码一（大量实例）

    一直没有系统学习Javascript和Jquery,每次都是用到的时候去搜索引擎查,感觉效率挺低的.这边把我项目中用的的记录下,想到哪写哪,有时间再仔细整理. 当然,由于我主要是写后端java开发,而 ...

  9. vb.net 使用 Regex Replace 正则 替换 Html字串的table中tbody第一个tr下的td为th

    本次示例效果如下: TextBox1中输入如下字符串: 12<table><tbody><tr><td>1<br/>11</td> ...

  10. 记录下mybatis中#{}和${}传参的区别

    最近在用mybatis,之前用过ibatis,总体来说差不多,不过还是遇到了不少问题,再次记录下, 比如说用#{},和 ${}传参的区别, 使用#传入参数是,sql语句解析是会加上"&quo ...

随机推荐

  1. Python学习之并发基础知识

    8 并发编程 8.1 基础知识 8.1.1 操作系统的定义 操作系统是存在于硬件与软件之间,管理.协调.调度软件与硬件的交互. 资源管理解决物理资源数量不足和合理分配资源这两个问题, 通俗来说,操作系 ...

  2. 【VS开发】设置文档标题

    [注意]我们注意到我们的文档的创建的时候我们会发现系统会去调用Doc类中的OnNewDocument函数,这里我们知道他是一个虚函数,我们可以在这里设置我们的文档的标题. 代码如下: BOOL CGr ...

  3. C语言博客作业06

    一.表格 问题 答案 这个作业属于那个课程 C语言程序设计II 这个作业要在哪里 https://edu.cnblogs.com/campus/zswxy/CST2019-1/homework/988 ...

  4. cell_phone_network(树形dp求最小支配集)

    Cell Phone Network Farmer John has decided to give each of his cows a cell phone in hopes to encoura ...

  5. c语言中宏定义#和 ##的作用：

    转载:http://www.cnblogs.com/cyttina/archive/2013/05/11/3072969.html 看了这篇文章后了解了,但是文章中的例子比较特别,我在这里加个注释好了 ...

  6. for XML path 使用技巧

    FOR XML PATH 是sqlserver数据库的语法,能将查询出的数据转换成xml格式的数据. 首先,我们来看一个正常的查询: SELECT TOP 2 id, name,crDate FROM ...

  7. java判断一个单向链表是否有环路

    今天刷LeetCode刷到一道这样的题,详情参见(https://leetcode-cn.com/problems/linked-list-cycle/) ADT: class ListNode { ...

  8. java hashmap&concurrentHashmap源理

    Java集合:HashMap底层实现和原理(源码解析) https://www.cnblogs.com/java-jun-world2099/p/9258605.html HashMap源码解析JDK ...

  9. CF1090H Linearization

    传送门 先考虑什么样的串才符合条件.\(s_i=P(x\&i)\oplus b\),其实这里的\(b\)只能使得整体是否取反,所以可以先不管.然后考虑\(x\)的每个二进制位的对\(s_0\) ...

  10. vue学习【二】vue结合axios动态引用echarts

    大家好,我是一叶,本篇是vue学习的第二篇,本篇将要讲述vue结合axios动态引用echarts. 在vue中,异步刷新使用的是axios,类似于大家常用的ajax,其实axios已经是vue的第二 ...