Grand Marshal Braev
Grand Marshal Braev

Reputation: 283

Getting Rid of empty spaces in a Complex Table

I'm trying to create a little bit complex table using rowspan, where it looks well enough in this fiddle using this code:

<table border="1" style="margin:5px;">
    <tr>
        <th><b>Name</b></th>
        <th><b>Date</b></th>
        <th><b>Time</b></th>
        <th><b>No. of Hours</b></th>
    </tr>
    <tr>
        <td rowspan="26">Sample Name</td>
    </tr>
    <tr>
        <td rowspan="6">2016-03-04</td>
    </tr>
    <tr>
        <td>04:59:11 pm</td>
        <td rowspan="5">0</td>
    </tr>
    <tr>
        <td>04:59:13 pm</td>
    </tr>
    <tr>
        <td>04:59:15 pm</td>
    </tr>
    <tr>
        <td>04:59:19 pm</td>
    </tr>
    <tr>
        <td>04:59:33 pm</td>
    </tr>
    <tr>
        <td rowspan="3">2016-03-07</td>
    </tr>
    <tr>
        <td>08:23:10 am</td>
        <td rowspan="2">0</td>
    </tr>
    <tr>
        <td>04:04:01 pm</td>
    </tr>
    <tr>
        <td rowspan="3">2016-03-08</td>
    </tr>
    <tr>
        <td>01:26:56 pm</td>
        <td rowspan="2">0</td>
    </tr>
    <tr>
        <td>05:00:48 pm</td>
    </tr>
    <tr>
        <td rowspan="6">2016-03-09</td>
    </tr>
    <tr>
        <td>08:21:35 am</td>
        <td rowspan="5">0</td>
    </tr>
    <tr>
        <td>08:21:59 am</td>
    </tr>
    <tr>
        <td>09:08:01 am</td>
    </tr>
    <tr>
        <td>09:09:52 am</td>
    </tr>
    <tr>
        <td>02:40:22 pm</td>
    </tr>
    <tr>
        <td rowspan="3">2016-03-10</td>
    </tr>
    <tr>
        <td>09:50:43 am</td>
        <td rowspan="2">0</td>
    </tr>
    <tr>
        <td>11:44:39 am</td>
    </tr>
    <tr>
        <td rowspan="2">2016-03-11</td>
    </tr>
    <tr>
        <td>11:05:03 am</td>
        <td rowspan="1">0</td>
    </tr>
</table>

But when I tried to put it in an FPDF generated page, their are empty spaces above each row which you will not notice when displayed in an HTML page. Take a look at the screenshot below:

enter image description here

Now, when I take a closer look at the fiddle, there are empty spaces in it but it's not that noticeable like in the FPDF generated file.

How will I be able to get rid of those empty spaces?

Upvotes: 1

Views: 173

Answers (1)

xpy
xpy

Reputation: 5641

You are doing it wrong actually. You are creating a row for every column and the renderer tries to fill the gaps so that's why you see empty rows. I manage to fix the table, but the logic behind it is pretty weird. You just have to have enough columns in a row to give the renderer to understand which columns you are rowspanning. Anyway, here is the result.

<table border="1" style="margin:5px;">
  <tr>
    <th><b>Name</b>
    </th>
    <th><b>Date</b>
    </th>
    <th><b>Time</b>
    </th>
    <th><b>No. of Hours</b>
    </th>
  </tr>
  <tr>
    <td rowspan="17">Sample Name</td>
    <td rowspan="5">2016-03-04</td>
    <td>04:59:11 pm</td>
    <td rowspan="5">0</td>
  </tr>
  <tr>
    <td>04:59:13 pm</td>
  </tr>
  <tr>
    <td>04:59:15 pm</td>
  </tr>
  <tr>
    <td>04:59:19 pm</td>
  </tr>
  <tr>
    <td>04:59:33 pm</td>
  </tr>
  <tr>
    <td rowspan="2">2016-03-07</td>
    <td>08:23:10 am</td>
    <td rowspan="2">0</td>
  </tr>
  <tr>
    <td>04:04:01 pm</td>
  </tr>
  <tr>
    <td rowspan="2">2016-03-08</td>
    <td>01:26:56 pm</td>
    <td rowspan="2">0</td>
  </tr>
  <tr>
    <td>05:00:48 pm</td>
  </tr>
  <tr>
    <td rowspan="5">2016-03-09</td>
    <td>08:21:35 am</td>
    <td rowspan="5">0</td>
  </tr>
  <tr>
    <td>08:21:59 am</td>
  </tr>
  <tr>
    <td>09:08:01 am</td>
  </tr>
  <tr>
    <td>09:09:52 am</td>
  </tr>
  <tr>
    <td>02:40:22 pm</td>
  </tr>
  <tr>
    <td rowspan="2">2016-03-10</td>
    <td>09:50:43 am</td>
    <td rowspan="2">0</td>
  </tr>
  <tr>
    <td>11:44:39 am</td>
  </tr>
  <tr>
    <td rowspan="1">2016-03-11</td>
    <td>11:05:03 am</td>
    <td rowspan="1">0</td>
  </tr>

</table>

I hope it works.

Upvotes: 1

Related Questions