How to merge cells on a page without using colspan?

D

Dmitry2017-08-28 23:51:17

css

Dmitry, 2017-08-28 23:51:17

Subject area : Web Development under Windows CE 5.0
Task : Display a table without the first cell in a row and merge the cells in the next row.
It seems to be trivial to solve it:

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }

  td {
    padding: 5px;
    width: 50%;
    border: solid black 1px;
  }

  td.no_border {
    border: none;
  }
</style>
<body>
  <table>
    <tr>
      <td class="no_border"></td>
      <td>R1:C2</td>
    </tr>
    <tr>
      <td colspan="2">R2:C1</td>
    </tr>
  </table>
</body>

And it works fine in all modern browsers: https://jsfiddle.net/t34ms87a/
But doesn't work in Internet Explorer on WinCE. There, the upper border of the bottom row disappears immediately after being added to the colspan properties.

Without colspan, like this:

<table>
    <tr>
      <td class="no_border"></td>
      <td>R1:C2</td>
    </tr>
    <tr>
      <td>R2:C1</td>
    </tr>
  </table>

It looks like this, all the boundaries are in place:

Tell me, how can this be cured or bypassed? I will be glad to any advice.

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

D

Dmitry, 2017-08-29
@kashamalasha

Wandering in my thoughts, I came across a solution:

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }

  td {
    padding: 5px;
    width: 50%;
    border: solid black 1px;
  }

  td.no_border {
    border: none;
  }

  td.bottom_border {
    border-bottom: solid black 1px; 
  }
  
</style>
<body>
  <table>
    <tr>
      <td class="no_border bottom_border"></td>
      <td>R1:C2</td>
    </tr>
    <tr>
      <td colspan="2">R2:C1</td>
    </tr>
  </table>
</body>

O

Oleg, 2017-08-29
@politon

https://jsfiddle.net/y29pyqqq/