Group multiple consecutive row cells into one with CSS?

Question

Ok, here's a graphic to explain what I'm talking about:

The first table would be what my html currently produces and the second table is what I'd like it to produce.

 #animalTable{ display: table; } .animalRow{ display: table-row; } .animalCell{ display: table-cell; width: 33%; } 

 <div id="animalTable"> <div class="animalRow"> <div class="animalCell">Dog</div> <div class="animalCell">Milton</div> <div class="animalCell">1/2/1998</div> </div> ... </div> 

What would be the best/easiest way to get my desired table? I know I could brute force it by creating sub-tables inside the main table but I was wondering if there was a better way?

Also, sorry if this is a dumb question.

Answer 1

I suggest using tables instead of div for this specific case. Here is why you should Use tables for what they are meant to and div's for what they are meant to .

What you are looking for is called Colspan and Rowspan , both are HTML td and th attributes.

Example:

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
    <th>Savings for holiday!</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
    <td rowspan="2">$50</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

You can read further on w3schools .

Hope this helps.

Answer 2

Simple, add different class or id selectors and in the css, remove all borders and re-add the ones you want to keep. Example,

div{
border: none;
border-top: solid 1px black;
border-left: solid 1px black;
}

Correct me if I am misunderstanding. Otherwise, if you have any questions don't hesitate to ask!