将表格中的3行均匀地分成一列HTML

所以我使用HTML和CSS创建了以下表格：但是，我希望将收割下的三条信息均匀分割，每个单元格在收集列中占用相同的空间量。眼下，随着电絮凝表格单元占用2个单元的空间，因为我赋予它即暂时这样做使用行跨度属性时，最好应占用的小区4/3的空间，将表格中的3行均匀地分成一列HTML

<html> 
<head> 
<style> 
    body { 
    font-family: Arial, Verdana, sans-serif; 
    font-size: 12 px; 
    color: #111111;} 
    th { 
    letter-spacing: 0.1em; 
    border-bottom: 2px solid #111111; 
    border-top: 1px solid #999; 
    } 

    .ExtractionConversion { 
    background-color: #f4cccc; 
    } 
    .Cultivation { 
    background-color: #d9ead3; 
    } 
    .Harvesting { 
    background-color: #fce5cd; 
    } 
    .Dewatering { 
    background-color: #c9daf8; 
    } 
    .Extraction { 
    background-color: #d9d2e9; 
    } 
    .Conversion { 
    background-color: #fff2cc; 
    } 
</style> 
</head> 

<body> 
<table width=800 height=100 style="text-align: center" padding="10"> 
    <thead> 
    <th>Cultivation</th> 
    <th>Harvesting</th> 
    <th>Dewatering</th> 
    <th>Extraction</th> 
    <th>Conversion</th> 
    </thead> 
    <tbody> 
    <tr> 
     <td rowspan="4" class="Cultivation";>Photobioreactor</td> 
     <td class="Harvesting">Centrifugation</td> 
     <td rowspan="2" class="Dewatering">Heat Drying</td> 
     <td rowspan="2" class="Extraction">Wet Solvent Extraction</td> 
     <td class="Conversion">Decarboxylation<td> 
    </tr> 
    <tr> 
     <td class="Harvesting">Electrocoagulation</td> 
     <td class="Conversion">Transesterfication</td> 
    </tr> 
    <tr> 
     <td rowspan="2" class="Harvesting">Electroflocculation</td> 
     <td rowspan="2" class="Dewatering">Speed Drying</td> 
     <td colspan="2" class="ExtractionConversion">HTL-CHG</td> 
    </tr> 
    <tr> 
     <td colspan="2" class="ExtractionConversion">Pyrolysis</td> 
    </tr> 
    </tbody> 
</table> 
<body> 
</html>

来源

2017-07-27 Mathew Jacob

您可以插入另一个表格并设置单元格的样式，添加边框以完成它。它不漂亮，但它的工作原理。

<html> 
 
<head> 
 
<style> 
 
    body { 
 
    font-family: Arial, Verdana, sans-serif; 
 
    font-size: 12 px; 
 
    color: #111111;} 
 
    th { 
 
    letter-spacing: 0.1em; 
 
    border-bottom: 2px solid #111111; 
 
    border-top: 1px solid #999; 
 
    } 
 

 
    .ExtractionConversion { 
 
    background-color: #f4cccc; 
 
    } 
 
    .Cultivation { 
 
    background-color: #d9ead3; 
 
    } 
 
    .Harvesting { 
 
    background-color: #fce5cd; 
 
    } 
 
    .Dewatering { 
 
    background-color: #c9daf8; 
 
    } 
 
    .Extraction { 
 
    background-color: #d9d2e9; 
 
    } 
 
    .Conversion { 
 
    background-color: #fff2cc; 
 
    } 
 
</style> 
 
</head> 
 

 
<body> 
 
<table width=800 height=100 style="text-align: center" padding="10"> 
 
    <thead> 
 
    <th>Cultivation</th> 
 
    <th>Harvesting</th> 
 
    <th>Dewatering</th> 
 
    <th>Extraction</th> 
 
    <th>Conversion</th> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td rowspan="4" class="Cultivation";>Photobioreactor</td> 
 
     <td class="Harvesting">Centrifugation</td> 
 
     <td rowspan="2" class="Dewatering">Heat Drying</td> 
 
     <td rowspan="2" class="Extraction">Wet Solvent Extraction</td> 
 
     <td class="Conversion">Decarboxylation<td> 
 
    </tr> 
 
    <tr> 
 
     <td class="Harvesting">Electrocoagulation</td> 
 
     <td class="Conversion">Transesterfication</td> 
 
    </tr> 
 
    <tr> 
 
     <td rowspan="2" class="Harvesting">Electroflocculation</td> 
 
     <td rowspan="2" class="Dewatering">Speed Drying</td> 
 
     <td colspan="2" class="ExtractionConversion">HTL-CHG</td> 
 
    </tr> 
 
    <tr> 
 
     <td colspan="2" class="ExtractionConversion">Pyrolysis</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<br> 
 

 
<table width=800 height=100 style="text-align: center" padding="10"> 
 
    <thead> 
 
    <th>Cultivation</th> 
 
    <th>Harvesting</th> 
 
    <th>Dewatering</th> 
 
    <th>Extraction</th> 
 
    <th>Conversion</th> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td rowspan="4" class="Cultivation";>Photobioreactor</td> 
 
     <td rowspan="4" class="Harvesting" style="padding:0;"> 
 
     <table cellpadding=0 cellspacing=0 width=100% height=100% style="text-align: center"> 
 
     <tr> 
 
     <td class="Harvesting" style="border-bottom:2px solid white;">Centrifugation</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="Harvesting" style="border-bottom:2px solid white;">Electrocoagulation</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="Harvesting">Electroflocculation</td> 
 
     </tr> 
 
    </table> 
 
     
 
     </td> 
 
     <td rowspan="2" class="Dewatering">Heat Drying</td> 
 
     <td rowspan="2" class="Extraction">Wet Solvent Extraction</td> 
 
     <td class="Conversion">Decarboxylation<td> 
 
    </tr> 
 
    <tr> 
 
     
 
     <td class="Conversion">Transesterfication</td> 
 
    </tr> 
 
    <tr> 
 
     
 
     <td rowspan="2" class="Dewatering">Speed Drying</td> 
 
     <td colspan="2" class="ExtractionConversion">HTL-CHG</td> 
 
    </tr> 
 
    <tr> 
 
     <td colspan="2" class="ExtractionConversion">Pyrolysis</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 

 
<br> 
 

 

 

 
<body> 
 
</html>

来源

2017-07-27 21:19:19 Varin

非常感谢你。非常有帮助，非常感谢，你不仅告诉我该怎么做，而且你还继续，甚至向我展示了它。 –

@MathewJacob完全没问题;）你总是可以接受它并接受它作为答案：D – Varin

将表格中的3行均匀地分成一列HTML

回答

相关问题