CSS如何在一个单元格中合并一个标题单元格

时间:2018-10-01 13:40:15

标签: css html-table header

我有以下标题

enter image description here

我有以下jsp

<table id="datos" class="tablainforme compact">
            <thead>
                <tr>
                    <th style="border-bottom:0px;border-top:0px;text-align:center;" rowspan="3" >Centro</th>
                    <th style="border-bottom:0px;border-top:0px" rowspan="3">Nombre</th>
                    <th style="border-bottom:0px;border-top:0px" rowspan="3">Matricula</th>
                    <th style="border-bottom:0px;border-top:0px"rowspan="3">Fecha</th>
                    <th  style="border-bottom:0px;border-top:0px" rowspan="3">Principio</th>
                    <th style="border-bottom:0px;border-top:0px" rowspan="3">Fin</th>
                    <th style="border-bottom:0px;border-top:0px" rowspan="3">Diferencia</th>
                </tr>
                <tr>
                    <th colspan="5">7 a 15</th>
                    <th  colspan="5"> 15 a 23</th>
                    <th  colspan="5">23 a 7</th>

                </tr>
                <tr>


                    <th rowspan="2" colspan="2">Locomotoras</th>
                    <th  colspan="2">Personal</th>
                    <th rowspan="2">Incidencias</th>
                    <th colspan="2">Locomotoras</th>
                    <th  colspan="2">Personal</th>
                    <th rowspan="2" >Incidencias</th>
                    <th colspan="2">Locomotoras</th>
                    <th  colspan="2">Personal</th>
                    <th rowspan="2">Incidencias</th>

                <tr>
                <tr>
                    <th style="border-bottom:0px;border-top:0px" >&nbsp</th>
                    <th style="border-bottom:0px;border-top:0px">&nbsp</th>
                    <th style="border-bottom:0px;border-top:0px">&nbsp</th>
                    <th style="border-bottom:0px;border-top:0px">&nbsp</th>
                    <th style="border-bottom:0px;border-top:0px">&nbsp</th>
                    <th style="border-bottom:0px;border-top:0px">&nbsp</th>
                    <th style="border-bottom:0px;border-top:0px">&nbsp</th>
                    <th>Asig.</th>
                    <th>Desa.</th>

                    <th>Asig.</th>
                    <th>Desa.</th>
                    <th>&nbsp</th>

                    <th>Asig.</th>
                    <th>Desa.</th>
                    <th>Asig.</th>
                    <th>Desa.</th>
                    <th></th>
                    <th>Asig.</th>
                    <th>Desa.</th>
                    <th>Asig.</th>
                    <th>Desa.</th>
                    <th></th>
                </tr>
            </thead>

我想将Incincencias单元合并到一个单元中。我试过rowspan = 2,但不起作用。

我也尝试了rowpan = 3。这样会将单元Incidencias合并为一个,但这是不正确的。

enter image description here

我该怎么做一个行距= 2的细胞白痴

1 个答案:

答案 0 :(得分:0)

您的代码是正确的。因为,如果您使用

<th  rowspan="3">Incidencias</th>

然后通过向右移动一个不好的位置来反映“疯子”的孩子。

,因此请仅使用rowspan =“ 2”。 再次,如果您还有其他要求,请尝试给我们提供您希望作为输出的格式。