Question

I have a table which is a bit like this:

/---+---+---+---+---+---\
| A | B | C | D | E | F |
\---+---+---+---+---+---/

I would like to get A and B to appear visually to be in the same cell, but not actually be in the same cell.

To do this I will need to have the border and padding between A and B become 0px.

However, setting the TD padding (Or margin!) did not work for me. So, any ideas on what I am doing wrong?

Answer 1

I have a different solution, and though slightly more complicated than the one previously suggested, I believe it will give you more flexibility as to how to apply the solution.

First, it does require some css code as shown below:

td:not([colspan='2']) {
  /*your styling here*/
}
td[colspan='2'] {
  display: table-row;
}
td[colspan='2'] > div {
  display: table-cell;
  width: 50%;
  /*same styling here*/
}

Finally, the html:

<table>
  <tbody>
    <tr>
      <td colspan='2'>
        <div id="cell-a"></div>
        <div id="cell-b"></div>
      </td>
      <td id="cell-c"></td>
      <!--and so on-->

Basically, the css mimics the table’s built-in display in order to optimize the table-row styling. This will allow css to do all the work, and furthermore, will allow you to put a colspan=’2′ anywhere in order to double up two cells wherever you need. I have already tested locally to ensure that this works.

Edit:
Just added the width: 50% under td[colspan=’2′] > div in order to space them out properly within the table structure.