HTML实现表格rowspan、colspan操作

前言

今天领导安排个任务，将报告的某个功能界面动态化展示，其中有涉及到 Table 表格操作(rowspan、colspan)，刚刚开始对这两概念不是很理解，走了很多弯路…扯远了，开始吧。

一、概念

colspan（跨列）

colspan：指的是我这数据占几列。

colspan案例

<table border="1">
  <tr>
    <!-- Monthly Savings占两列 -->
    <th colspan="2">Monthly Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

rowspan（跨行）

rowspan：指的是我这数据占几行。

rowspan案例

<table border="1">
  <tr>
	<!-- Savings for holiday!占三行 -->
    <th rowspan="3">Savings for holiday!</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

注意： Savings for holiday为什么要占三行，因为它自己本身算一行。

二、项目实践

效果展示

HTML

涉及 company 项目效果会有点差异，请谅解。

    <table border="1">
	    <tbody>
	        <tr style="line-height: 32px;">
                <th><span>参考值</span></th>
                <th><span>炎症类型</span></th>
                <th><span>呼吸道疾病</span></th>
            </tr>
            <tr>
                <th rowspan="6">
                	<span>&lt;25ppb</span>
                </th>
            </tr>
            <tr>
                <td rowspan="4">
                	<span>非嗜酸性炎症为主(嗜中性、感染性)非激素(抗生素)药物医疗为主</span>
                </td>
                <td><span>非嗜酸性哮喘</span></td>
            </tr>
            <tr>
                <td><span>支气管扩张</span></td>
            </tr>
            <tr>
                <td><span>嗜中性慢阻肺</span></td>
            </tr>
            <tr>
                <td><span>感染性肺炎</span></td>
            </tr>
            <tr>
                <td><span>小气道嗜酸性炎症</span></td>
                <td><span>小气道哮喘</span></td>
            </tr>
            
            <tr>
                <th rowspan="6">
                	<span>&gt;25ppb</span>
                </th>
            </tr>
            <tr>
                <td rowspan="6">
                	<span>嗜酸性炎症为主(气道高反应)激素药物治疗为主</span>
                </td>
                <td><span>过敏性哮喘</span></td>
            </tr>
            <tr>
                <td><span>咳嗽变异性哮喘</span></td>
            </tr>
            <tr>
                <td><span>嗜酸性支气管炎</span></td>
            </tr>
            <tr>
                <td><span>混合炎症慢阻肺</span></td>
            </tr>
            <tr>
                <td><span>嗜酸性肺炎</span></td>
            </tr>
	    </tbody>
	</table>

总结

下面实战符合自己的项目需求，概念问题，如果还不理解的可以参考其他大佬的文章或者其他网站。