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.

heay please post u r full code so that i can get idea what u r getting — Mandarr Sant, Sep 28 '16 at 04:34
I think better you can use `` for this. If you are OK with the `
` try this: 1) http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_td_rowspan 2) http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_span :) — Prifulnath, Sep 28 '16 at 05:13
I also suggest using HTML table with `rowspan` here. There is no replacement for `rowspan` in current CSS (in future, it would be possible with CSS Grid Layout, but it isn't supported yet in any shipped browser). — Ilya Streltsyn, Sep 28 '16 at 06:22

score 2 · Accepted Answer · edited May 23 '17 at 12:06

2

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.

edited May 23 '17 at 12:06

Community

1
1

answered Sep 28 '16 at 05:52

xWaZzo

748
5
19

Thank you! This is exactly what I was looking for! – user2827048 Sep 28 '16 at 15:14

score -3 · Answer 2 · answered Sep 28 '16 at 04:35

-3

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!

answered Sep 28 '16 at 04:35

Tishbyte

40
8

2

Also, if you are going to downvote, please give a reason. No one likes an anonymous downvoter. – Tishbyte Sep 28 '16 at 04:39
Your suggested solution just removes the borders between cells, but doesn't actually merge cells with their content into one cell, as OP asked. – Ilya Streltsyn Sep 28 '16 at 06:19
My downvote goes for the same reason as Ilya's. It is simply not a correct colution of the problem. – Anton Sep 28 '16 at 07:18
Then that means I misunderstood what the question was. Thank your response though. – Tishbyte Sep 28 '16 at 16:04

Group multiple consecutive row cells into one with CSS?

2 Answers2