Search code examples
htmlhtml-table

is it possible to use colspan in float number in html table?


how can i get it If I have two rows first row has two columns and second row has three columns and I want to give 1.5 colspan to first row. How is it possible to use colspan without using div.

This is what I want:

enter image description here


Solution

  • As an option:

    table {
      border-collapse: collapse;
      border-spacing: 0;
    }
    
    table td {
      padding: 4px 16px;
      text-align: center;
      border: solid 1px #ccc;
    }
    
    table td:empty {
      height: 0;
      border: 0;
      padding: 0;
    }
    <table>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td colspan="3">1</td>
        <td colspan="3">2</td>
      </tr>
      <tr>
        <td colspan="2">3</td>
        <td colspan="2">4</td>
        <td colspan="2">5</td>
      </tr>
    </table>