cel splitsen in kale HTML; geen editor

[mariannevanh]

Ik wil in een tabel AF EN TOE een cel splitsen in twee kolommen.
In alles wat ik er tot nu toe over kan vinden lijkt het er dat alle cellen in die kolom, behalve die ene die ik wil splitsen, samengevoegd moeten worden. Dat betekent een hoop werk voor die AF EN TOE dat ik een cel wil splitsen.
Zie ik het goed of zijn er nog andere manieren?

Ik heb het al geprobeerd met een editor, maar die gooit er vaak allerlei - in mijn ogen - onnodige informatie tussen, waardoor het bestand 80 keer zo groot wordt.
Welke editor laat de rest van de HTML ongemoeid?

 

[bron]

Misschien kun je hier iets mee...

<style>
table, table * {
  box-sizing: border-box;
  font: normal 14px arial,sans-serif;
  padding: 0;
}
table {
  border-collapse: collapse;
}
td {
  width: 150px;
  padding: 2px;
  border: 1px solid #000;
}
td.split {
  padding: 0;
}
td.split div {
  float: left;
  width: 50%;
  padding: 2px;
}
td.split div:first-child {
  border-right: 1px solid #000;
}
</style>

<table>
<tr>
  <td>Een cel</td>
  <td class="split">
    <div>Helft 1</div>
    <div>Helft 2</div>
  </td>
  <td>Een cel</td>
  <td>Een cel</td>
</tr>
</table>

Suc6. Have fun.

 

[mariannevanh]

Voorzover ik het nu kan zien, is dit een prima oplossing!
Helaas beheers ik de syntaxis niet goed genoeg. Daarom mijn vervolgvraag: hoe verdeel je dan een cel in twee rijen?

 

[mariannevanh]

Ik heb nu een hele tijd met deze style gewerkt en het werkt nagenoeg prima.
Een van de dingen die ik aangepast heb, is dat ik het percentage van de splitsing niet op 50% heb gezet, maar op 25%. Ik hoopte dat alleen de eerste verdeelde cel 25% van de originele breedte zou worden, maar de style past dit toe op alle volgende delen. Ik wil dus graag een onderverdeling in een deel van 25% en een deel van 75%.
Hoe doe ik dat?

 

[bron]

Daarom mijn vervolgvraag: hoe verdeel je dan een cel in twee rijen?

CSS

table, table * {
   box-sizing: border-box;
   font-family: arial, sans-serif;
   padding: 0;
}
table {
   border-collapse: collapse;
   position: relative;
}
td {
   width: 110px;
   border: 2px solid;
   padding: 5px;
   font-size: 14px;
   line-height: 1;
}
.doublerow, .doublerow td {
   width: 100%;
   height: 0;
   border: 0;
}
.doublerow div {
   width: 108px;
   height: 50px;
   top: 38px;
   left: 221px;
   position: absolute;
   padding: 10px 5px 0 5px; /* centreren */
   background: #fff;
}

HTML

<table>
<!-- dummy rij over hele breedte -->
<tr class="doublerow">
   <td colspan="4">
   <div>Dit is best een grote cel</div>
   </td>
</tr>
<tr><td>Een cel</td><td>Een cel</td><td>Een cel</td><td>Een cel</td></tr>
<tr><td>Een cel</td><td>Een cel</td><td>Een cel</td><td>Een cel</td></tr>
<tr><td>Een cel</td><td>Een cel</td><td>Een cel</td><td>Een cel</td></tr>
<tr><td>Een cel</td><td>Een cel</td><td>Een cel</td><td>Een cel</td></tr>
</table>

Je ziet dat het met een extra dummy rij aan het begin van je tabel lukt. Het gaat om regel 1-4 van .doublerow div in de style. Die moet je aanpassen om de dummy cel over de juiste cellen heen te leggen. De waardes zijn te berekenen maar gewoon uitproberen gaat sneller!

 

[bron]

... en dit is je eerste vraag

een onderverdeling in een deel van 25% en een deel van 75%

HTML wijzigen:

<td class="split">
  <div class="split25">Helft 1</div>
  <div class="split75">Helft 2</div>
</td>

CSS wijzigen:

td.split div {
  float: left;
  /* width: 50%; */
  padding: 2px;
}
td.split div:first-child {
  border-right: 1px solid #000;
}
td.split .split25 { width: 25%; }
td.split .split50 { width: 50%; }
td.split .split75 { width: 75%; }

Je kunt dan bij div de class split25, split50, en split75 gebruiken. Het totaal van 2 helften zal 100% moeten zijn.

Suc6. Have fun.