在表格中,如何在单个单元格中嵌套多行单元格?

时间:2016-09-16 22:02:31

标签: html css html-table

我的表由6列5行组成。在每一行中,第5列需要将多个单元格堆叠在一起。有没有办法在不在每行的第5列中嵌套新表的情况下执行此操作?

    <tr>
        <td><img class="image" src="Posters/suicidesquad-poster1.jpg"></td>
        <td>Suicide Squad</td>
        <td>PG-13</td>
        <td>2 Hour(s) 3 Minutes</td>
        <!-- Here I need to add two rows within the 5th column 

            <td>Row One </td>
            <td>Row Two </td>

        The sixth column will be the same as the others --> 

        <td>CC, DV</td>
        </tr>

3 个答案:

答案 0 :(得分:3)

如果您想使用Create some Base Ticket Data -- I trust your process will produce Declare @Ticket table (Job_ticketid int,JOB_PROBLEM_TYPE int, Report_Date Datetime,Close_Date DateTime,time_to_accept int,time_to_resolve int,SLA_Compliant int) Insert Into @Ticket values (1002,527,'2016-09-15 5:42 PM','2016-09-15 7:15 PM',4,89,1), (1003,528,'2016-09-15 4:12 PM','2016-09-15 4:16 PM',3, 1,1), (1004,530,'2016-09-15 5:42 PM','2016-09-15 7:15 PM',4,89,1), (1005,529,'2016-09-15 5:42 PM','2016-09-15 4:16 PM',3, 1,1), (1006,241,'2016-09-15 5:42 PM','2016-09-15 4:16 PM',3, 1,1) Declare @Table table (PARENT_ID int,PROBLEM_TYPE_ID int,PROBLEM_TYPE_NAME varchar(50)) Insert into @Table values (12 ,1 ,'Server/Hardware'), (NULL,2 ,'IT General/Other'), (NULL,3 ,'Phone/Voicemail'), (NULL,4 ,'HR'), (10 ,5 ,'CMS Applications'), (NULL,12,'Incident (Technical Issues)'), (12 ,13,'CMS Applications'), (12 ,527,'Alerting'), (527 ,528,'Interpreter Alerts Not Working'), (527 ,530,'Nutanix Prism Alters Not Working'), (527 ,529,'Orion Alerts Not Working'), (12 ,241,'Call Processing Center') Declare @Top int = null --<< Sets top of Hier Try 12 Declare @Nest varchar(25) ='|-----' --<< Optional: Added for readability ;with cteHB (Seq,Path,PROBLEM_TYPE_ID,PARENT_ID,Lvl,PROBLEM_TYPE_NAME) as ( Select Seq = cast(1000+Row_Number() over (Order by PROBLEM_TYPE_NAME) as varchar(500)) ,Path = cast(PROBLEM_TYPE_ID as varchar(500)) ,PROBLEM_TYPE_ID ,PARENT_ID ,Lvl=1 ,PROBLEM_TYPE_NAME From @Table Where IsNull(@Top,-1) = case when @Top is null then isnull(PARENT_ID,-1) else PROBLEM_TYPE_ID end Union All Select Seq = cast(concat(cteHB.Seq,'.',1000+Row_Number() over (Order by cteCD.PROBLEM_TYPE_NAME)) as varchar(500)) ,Path = cast(concat(cteHB.Path,'.',cteCD.PROBLEM_TYPE_ID) as varchar(500)) ,cteCD.PROBLEM_TYPE_ID ,cteCD.PARENT_ID,cteHB.Lvl+1 ,cteCD.PROBLEM_TYPE_NAME From @Table cteCD Join cteHB on cteCD.PARENT_ID = cteHB.PROBLEM_TYPE_ID) ,cteR1 as (Select Seq,PROBLEM_TYPE_ID,R1=Row_Number() over (Order By Seq) From cteHB) ,cteR2 as (Select A.Seq,A.PROBLEM_TYPE_ID,R2=Max(B.R1) From cteR1 A Join cteR1 B on (B.Seq like A.Seq+'%') Group By A.Seq,A.PROBLEM_TYPE_ID ) ,cteFinalHier as ( Select B.R1 ,C.R2 ,A.PROBLEM_TYPE_ID ,A.PARENT_ID ,A.Lvl ,PROBLEM_TYPE_NAME = Replicate(@Nest,A.Lvl-1) + A.PROBLEM_TYPE_NAME ,A.Seq -- < Included for Illustration ,A.Path -- < Included for Illustration From cteHB A Join cteR1 B on A.PROBLEM_TYPE_ID=B.PROBLEM_TYPE_ID Join cteR2 C on A.PROBLEM_TYPE_ID=C.PROBLEM_TYPE_ID ) Select A.Job_ticketid ,[Problem_Type_Name(Parent)]=C.PROBLEM_TYPE_NAME ,[Problem_Type_Name(Child)] =B.PROBLEM_TYPE_NAME ,B.PROBLEM_TYPE_ID ,A.Report_Date ,A.Close_Date ,A.time_to_accept ,A.time_to_resolve ,A.SLA_Compliant From @Ticket A Join cteFinalHier B on A.JOB_PROBLEM_TYPE=B.PROBLEM_TYPE_ID Cross Apply (Select Top 1 * from cteFinalHier Where B.R1 between R1 and R2 and Lvl=1) C Order By B.R1 代替rowspan,我相信您想要这样:

divs

答案 1 :(得分:2)

是的,您使用col-spanrow-span

<table>
    <tr>
        <td rowspan="2">Two High</td>
        <td rowspan="2">Two High</td>
        <td>Single</td>
    </tr>
    <tr>
        <td>Single</td>
    </tr>
</table>

这会给你带来理想的效果,实际上它会合并&#34; <td>在一起,同时保留您想要出现的单数。

请查看here以获取有关此属性的更多信息。

答案 2 :(得分:2)

您可以将2个DIV放入每个TD中:

<tr>
    <td><img class="image" src="Posters/suicidesquad-poster1.jpg"></td>
    <td>Suicide Squad</td>
    <td>PG-13</td>
    <td>2 Hour(s) 3 Minutes</td>
    <td>
       <div class="my_extra_cells">Row One</div>
       <div class="my_extra_cells">Row Two </div>
    </td>
    <td>CC, DV</td>
</tr>

只需为.my_extra_cells创建一个CSS规则,让它看起来如你所愿。