html - 将表格单元格扩展到五行
问题描述
我创建了一个 html 表格,如下图所示,现在我希望装箱单单元格向下跨越五行。我尝试了几种方法,但都没有成功。看起来很简单,但它杀了我,帮助大家!
表格的图片链接在这里
<TABLE border=1 style="width: 100%; border-collapse: collapse; border: 1px solid black;">
<colgroup>
<col style="width: 43%">
<col style="width: 11%">
<col style="width: 24%">
<col style="width: 35%">
</colgroup>
<THEAD>
<TR>
<TH rowspan="5"><b>ISSUER</b></TD>
<TH style="text-align:center" colspan="3" rowspan="5">PACKING LIST</TD>
</TR>
</THEAD>
<TR>
<td>
<p>Jonathan Vehicle Assemblers Limited</p>
<p>Plot 673 TA Industrial Park</p>
<p>Kibaha, Tanzania</p>
</td>
</TR>
<TR>
<td><b>TO:</b></td>
</TR>
<TR>
<td>
<p>Jifag Motors (T) Limited</p>
<p>Nyerere Road</p>
<p>P.O Box 40935402</p>
</td>
</TR>
<TR>
<td><b>LOCATION:</b></td>
</TR>
<TR>
<td rowspan="3">Assembly at Kibaha, Tanzania</td>
<td colspan="2"><b>PACKING LIST NO.:</b></td>
<td colspan="1"><b>DATE</b></td>
<TR>
<td colspan="2">GFA-PL-2020-00001</td>
<td>06-Nov-20</td>
</TR>
</TABLE>
解决方案
table {
width: 100%;
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
<table>
<colgroup>
<col style="width: 43%">
<col style="width: 11%">
<col style="width: 24%">
<col style="width: 35%">
</colgroup>
<thead>
<tr>
<th rowspan="5"><b>ISSUER</b></th>
<th style="text-align:center" colspan="3" rowspan="5">PACKING LIST</th>
</tr>
</thead>
<tr>
<td>
<p>Jonathan Vehicle Assemblers Limited</p>
<p>Plot 673 TA Industrial Park</p>
<p>Kibaha, Tanzania</p>
</td>
<td rowspan="4" colspan="3"></td>
</tr>
<tr>
<td><b>TO:</b></td>
</tr>
<tr>
<td>
<p>Jifag Motors (T) Limited</p>
<p>Nyerere Road</p>
<p>P.O Box 40935402</p>
</td>
</tr>
<tr>
<td><b>LOCATION:</b></td>
</tr>
<tr>
<td rowspan="3">Assembly at Kibaha, Tanzania</td>
<td colspan="2"><b>PACKING LIST NO.:</b></td>
<td colspan="1"><b>DATE</b></td>
<tr>
<td colspan="2">GFA-PL-2020-00001</td>
<td>06-Nov-20</td>
</tr>
</table>
推荐阅读
- r - 如何编号唯一对 X,Y
- c# - 在 Xamarin C# Visual Studio 中创建 TableView
- javascript - 如何使用javascript集成字符串中字符的计数频率
- c# - 始终使用最新版本的 Newtonsoft.Json
- c# - 无法首先在列实体框架代码上定义 PRIMARY KEY 约束
- emacs - 使用估计在 emacs org-mode 中自动安排待办事项
- r - Safari 浏览器上的 Shinyapps.io 无法连接到服务器“localhost”
- python-3.x - cv2.HoughCircles 需要超过 15 分钟才能运行
- javascript - 路由时AngularJs memoryLeak
- javascript - 如何使用firebase函数从文档中查询一个数字并将其全部汇总到firestore中的父文档中