Merging two cells HTML table

Question

Example table:

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th>Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td colspan="2">555 77 854</td>
    <td>555 77 855</td>
  </tr>
</table>

I would like to merge two td with phone numbers, to show them one next to another without a vertical line which separates two cells. But keeping those numbers in separate td elements is a must, so I am not allowed to write both of them in one td. Is this achievable?

It should look something like this:

+------------+-----------------------+
|    Name    |       Telephone       |
+------------+-----------------------+
| Bill Gates | 555 77 854 555 77 855 |
+------------+-----------------------+

EDIT

Colspaning table headers won't colspan my data, and that is what I actually need.

I also need to move the data from second `td` as left as possible. So I need it to be exectly one next to another, as if it was written in same `td`. Removing border will still keep it separated from data in first `td`, right? — niksrb, Oct 23 '18 at 15:56
Possible duplicate of [How do you use colspan and rowspan in HTML tables?](https://stackoverflow.com/questions/9830506/how-do-you-use-colspan-and-rowspan-in-html-tables) — Liam, Oct 23 '18 at 15:59

score 2 · Accepted Answer · answered Oct 23 '18 at 15:57

2

If you only expect two phones this could be accomplished like this:

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>555 77 854</td>
    <td>555 77 855</td>
  </tr>
</table>

answered Oct 23 '18 at 15:57

Erubiel

2,934
14
32

No it's not. Try that code, it will look like this https://jsfiddle.net/umpy3nb2/1/ – niksrb Oct 23 '18 at 16:00
Try with this fix, same jsfiddle, just added two css rules https://jsfiddle.net/umpy3nb2/2/ ... sorry copied wrong link... updated the comment, this one's right – Erubiel Oct 23 '18 at 16:03
Same as in answer bellow, it's too separated... Check what I have written in comment down there. – niksrb Oct 23 '18 at 16:08
Yeah, you can do that by assigning a width and a wordwrap to the first rule i added, like this: https://jsfiddle.net/umpy3nb2/3/ – Erubiel Oct 23 '18 at 16:10

Takit Isy · Answer 2 · 2018-10-23T16:15:56.157

Your colspan="2" was misplaced if you want to have multiple td for one th table-header.

Then, maybe you can use some CSS like this for the styling:

New snippet: (Less CSS code)

table {
  border-collapse: collapse;
}

th, td {
  padding: 4px 8px;
  border: 1px solid black;
}

td:nth-of-type(3) {
  border-left: 2px solid transparent;
}

<table>
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone(s)</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>555 77 854</td>
    <td>555 77 855</td>
  </tr>
</table>

Old snippet:

table {
  border-collapse: collapse;
}

th, td {
  padding: 4px 8px;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}
th, td:first-of-type {
  border-left: 1px solid black;
  border-right: 1px solid black;
}
td:last-of-type {
  border-right: 1px solid black;
}

<table>
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone(s)</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>555 77 854</td>
    <td>555 77 855</td>
  </tr>
</table>

That removes the border between two cells, but they still look like they are in separated cells (and they really are), but I need them to look as they are not. I need them to be as close one to another as possible — niksrb, Oct 23 '18 at 16:02
@niksrb I've removed your `width=100%` in inline styling. What about now ? Except if you need it, I'll keep it removed. — Takit Isy, Oct 23 '18 at 16:03

Merging two cells HTML table

2 Answers2