Question

所以我使用HTML和CSS创建了下表：但是，我希望将Harvesting下的三条信息均匀分割，以便每个单元格占用相同的空间在收获专栏中。现在，带有电絮凝的表格单元占用了2个单元格的空间，因为我理所当然地使用rowspan属性将其分配给它时占据了单元格的4/3空间，

<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>

Answer 1

您可以在其中插入另一个表并设置单元格的样式，添加边框以完成它。它不漂亮但它有效。

＆＃13;

<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>

＆＃13;

在表格HTML中均匀分割3行

1 个答案: