CODEWITHSUNDEEP
htmlhtml-tablerow
user3711600
user3711600

Reputation: 873

Split an html row into multiple (sub) rows

How can I split a row in a html table into multiple (sub) rows? (I don't mean to use rowspan to span multiple rows because I am using a rails gem called sync that is constrained to updating a single table row at a time).

For example, how can I create a single row in a table, that:

This is just an example. I need to be able to dynamically decide the way the rows will be split at run time.

Edit: see below for structure as described in bullet points above (although note i'm trying to achieve this structure within a single table row, i.e. without using rowspan)

<table>
    <tr>
        <td rowspan=4>1</td>
        <td rowspan=2>2</td>
        <td >3</td>
    </tr>

    <tr>
        <td >4</td>
    </tr>

    <tr>
        <td rowspan=2>2</td>
        <td >5</td>
    </tr>

     <tr>
        <td >6</td>    
     </tr>

http://jsfiddle.net/40ukzvz1/

Upvotes: 1

Views: 13470

Answers (1)

Adriano
Adriano

Reputation: 3934

You could try nesting tables so that each table structure is not affected by the cell it sits in.

See code example:

<table width="100%" border bgcolor="red">
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
  </tr>
  <tr>
    <td>
      <table width="100%" border bgcolor="green">
        <tr>
          <td>1</td>
        </tr>
        <tr>
          <td>2</td>
        </tr>
      </table>
    </td>
    <td>
      <table width="100%" border bgcolor="blue">
        <tr>
          <td>1</td>
        </tr>
        <tr>
          <td>2</td>
        </tr>
        <tr>
          <td>3</td>
        </tr>
      </table>
    </td>
    <td>
      <table width="100%" border bgcolor="yellow">
        <tr>
          <td>1</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
  </tr>
</table>

Upvotes: 1

Related Questions