Search code examples
htmlcsshtml-tablecellrows

how to set two cells in one cell of table?

I get confused when I want set two cells (x, y) in one cell CoordLamberts?

.techniques {
  width: 70%;
  border: 1px solid;
}

.techniques,
.techniques th,
.techniques td {
  border-collapse: collapse;
  border: 1px solid;
}
<table class="techniques">
  <tr>
    <th rowspan="2">Foret</th>
    <th rowspan="2">Canton</th>
    <th rowspan="2">Secteur</th>
    <th rowspan="2">Parcelles</th>
    <th>CoordLamberts</th>
    <th rowspan="2">Superficie(ha)</th>
  </tr>
  <tr>
    <th></th>
    <th></th>
    <th></th>
    <th></th>
    <th>x</th>
    <th>y</th>
    <th></th>
  </tr>
  <tr>
    <td>City</td>
    <td>BV</td>
    <td>region</td>
    <td>3</td>
    <td>443</td>
    <td>634</td>
    <td>13</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td>7</td>
    <td>786</td>
    <td>564</td>
    <td>35</td>
  </tr>
  <tr>
    <td colspan="4">superficie(ha)</td>
    <td>786</td>
    <td>564</td>
    <td>35</td>
  </tr>
</table>
What I expect: enter image description here What I get: enter image description here

Solution 

  • .techniques {
  width: 70%;
  border: 1px solid;
}

.techniques,
.techniques th,
.techniques td {
  border-collapse: collapse;
  border: 1px solid;
}
    <table class="techniques">
  <tr>
    <th rowspan="2">Foret</th>
    <th rowspan="2">Canton</th>
    <th rowspan="2">Secteur</th>
    <th rowspan="2">Parcelles</th>
    <th colspan="2">CoordLamberts</th>
    <th rowspan="2">Superficie(ha)</th>
  </tr>
  <tr>
    <th>x</th>
    <th>y</th>
  </tr>
  <tr>
    <td>City</td>
    <td>BV</td>
    <td>region</td>
    <td>3</td>
    <td>443</td>
    <td>634</td>
    <td>13</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td>7</td>
    <td>786</td>
    <td>564</td>
    <td>35</td>
  </tr>
  <tr>
    <td colspan="4">superficie(ha)</td>
    <td>786</td>
    <td>564</td>
    <td>35</td>
  </tr>
</table>