將表格中的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

回答

相關問題