两个html中,Table表格跨列布局排版的代码示例.

Table表格跨列排版布局
主要是实现项目中的一个前端布局需求.
因为需求是有三个列,每个列下面要有两个行数据.
问了张技术大佬,说是需要跨行(用到rowspan属性)来实现,无奈对html的表格实在转不过弯.最终给出一个代码示例,我照着代码示例解决了.

需求最终效果如下:

张大佬给出的代码示例如下:

<table border="8">
  <tr>
    <td>首饰</td>
    <td>首饰</td>
    <td>首饰</td>
    <td>首饰</td>
  </tr>
  <tr>
    <td rowspan="2">123</td>
    <td rowspan="2">123</td>
    <td>567</td>
    <td>876</td>
  </tr>
  <tr>
    <td>213</td>
    <td>222</td>
  </tr>
  <tr>
    <td rowspan="2">123</td>
    <td rowspan="2">123</td>
    <td>909</td>
    <td>808</td>
  </tr>
  <tr>
    <td>707</td>
    <td>606</td>
  </tr>
</table>

我最终的应用代码如下:
因为是配合beet来实现的遍历生成动态表格,所以会有$符号和for循环语句存在.

<table class="table table-bordered" border="8">
<tr>
		<td>赛事编号</td>
	<td>赛事</td>
	<td>开赛时间</td>
	<td>主队 VS 客队</td>
	<td>让球</td>
	<td>让</td>
	<td>平</td>
	<td>负</td>
</tr>
@for(match in list){
<tr>
<td rowspan="2">${match.matchNumber}</td>
<td rowspan="2">${match.matchName}</td>
<td rowspan="2">${match.beijingTime,"MM-dd HH:mm"}</td>
<td rowspan="2">${match.homeGroup} ${match.ranksHomeName} ${match.ranksGuestName} ${match.guestGroup}</td>
<td rowspan="2">0<br>${match.rate}</td>
<td>${match.zs}</td>
<td>${match.zp}</td>
<td>${match.zf}</td>
</tr>

<tr>
<td>${match.rs}</td>
<td>${match.rp}</td>
<td>${match.rf}</td>
</tr>
@}}