avazwij avazwij - 2 months ago 5
HTML Question

how to create a table between 2 rows of an other table?

i'm in a situation where i need to display a table (to hold data retrieved from a database) between rows if a certain condition is fulfilled.

so to simplify the problem, let us imagine i have a table with only 2 TRs, and 2 TD per TR:

<table>
<tr>
<td>First row</td> <td>First row</td>
</tr>
<!-- how to insert a table here ?-->
<tr>
<td>Second row</td> <td>Second row</td>
</tr>
</table>


How to insert a table between the 2 rows using html? the inserted table must have the same number of columns (2 TD as the available one but I do not care for rows))

Answer

You can add another row with a data cell that spans for two column and can then put your nested table inside the cell.

   <table >
      <tr>
        <td>First row</td>
        <td>First row</td>
      </tr>
      <tr>
      <td colspan="2">
        <table >
          <tr>
            <td>First row in nested table</td>
            <td>First row in nested table</td>
          </tr>
        </table>
        </td>
      </tr>
      <tr>
        <td>Second row</td>
        <td>Second row</td>
      </tr>
    </table>

demo: https://jsfiddle.net/7oveyv4r/1/

Comments