简体   繁体   English

如何行跨 html 表中的 2 列

[英]How can I rowspan 2 columns in html table

I was able to do multi row for the column "dosage form" but now I want another column "Pack Size" to be multi row.我能够为“剂型”列做多行,但现在我希望另一列“包装尺寸”为多行。 But the data is overflowing bottom as shown in the image.但数据溢出底部,如图所示。 I have attached jsfiddle link.我附上了jsfiddle链接。 我想要这样的桌子

<table>
  <tr>
    <th>Sl</th>
    <th>Generic Name</th>
    <th>Category of Disease</th>
    <th>Sub Category</th>
    <th>Global Trade Name & Company</th>
    <th>Mfg. Company</th>
    <th>Mfg. Brand Name</th>
    <th>Dosage Form</th>
    <th>Strength</th>
    <th >Pack Size</th>
    <th>Availabiliy</th>
  </tr>
  <tr>
    <td rowspan='3'>1</td>
    <td rowspan='3'>Alfreds Futterkiste</td>
    <td rowspan='3'>Maria Anders</td>
    <td rowspan='3'>Germany</td>
    <td rowspan='3'>Germany</td>
    <td rowspan='3'>Germany</td>
    <td rowspan='3'>Germany</td>
    <td rowspan='3'>Germany</td>
    <td rowspan='3'>Germany</td>
    <td rowspan='1'>asdad</td>
     
    <td rowspan='3'>Germany</td>
  </tr>
  <tr>
    <td>project5 multi row data2</td>
  </tr>
  <tr>
    <td>project5 multi row data3</td>
  </tr>
</table>

Js Fiddle Link of corresponding issue对应issue的Js Fiddle Link

The basic idea here is that the first the first row will be printed and in the next (at the same level as the first one), the second row will be printed and the column having rowspan='3' will be skipped.这里的基本思想是首先打印第一行,然后在下一个(与第一行相同级别)打印第二行,并且将跳过 rowspan='3' 的列。 Same thing will happen with the third row.第三排也会发生同样的事情。 See the attached images to understand better.请参阅附图以更好地理解。

<table>
  <tr>
    <th>Sl</th>
    <th>Generic Name</th>
    <th>Category of Disease</th>
    <th>Sub Category</th>
    <th>Global Trade Name & Company</th>
    <th>Mfg. Company</th>
    <th>Mfg. Brand Name</th>
    <th>Dosage Form</th>
    <th>Strength</th>
    <th >Pack Size</th>
    <th>Availabiliy</th>
  </tr>
  <tr>
    <td rowspan='3'>1</td>
    <td rowspan='3'>Alfreds Futterkiste</td>
    <td rowspan='3'>Maria Anders</td>
    <td rowspan='3'>Germany1</td>
    <td rowspan='3'>Germany2</td>
    <td rowspan='3'>Germany3</td>
    <td rowspan='3'>Germany4</td>
    <td >Germany5</td>
    <td rowspan='3'>Germany</td>
    <td >asdad</td>
     
    <td rowspan='3'>Germany</td>
  </tr>
  <tr>
    <td>project5 multi row data2</td>
    <td>project5 multi row data2</td>
  </tr>
  <tr>
   <td>project5 multi row data3</td>
    <td>project5 multi row data3</td>
  </tr>
</table>

代码片段

输出

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM