htmlcssrr-markdowntint

Table footer with linked margin note creating large break in text

I am using the tint template in R Markdown for an HTML rendering. I don't think that this issue is specific to R or R Markdown, though. I think the fix can be accomplished with CSS or HTML. Although, I would guess that Dirk, Jon, or JJ, Yihui, or Dave could probably tell me how to fix this properly in R Markdown since they authored or contributed to the development of tint.

How can I modify this to prevent the margin notes from affecting the spacing below the table?

I did try setting the table tag with the styles align: left; and float: left; to see if that would work. Neither impacted the spacing at the bottom.

Here is the table footer with the margin note as HTML script:

<tfoot>
      <tr>
        <td style="padding: 0; " colspan="100%">
          <span style="font-style: italic;">Note.</span> <sup></sup> This is the data dictionary based on the data adapted from CFPB (n.d.)<label for="tufte-sn-3" class="margin-toggle sidenote-number">3</label><input type="checkbox" id="tufte-sn-3"
            class="margin-toggle"><span class="sidenote"><span class="sidenote-number">3</span> Consumer Financial Protection Bureau. (n.d.) <em>Consumer complaint database API docs</em> [data set and code book]. Office of Civil Rights. Retrieved
            April 28, 2021, from <a href="https://cfpb.github.io/api/ccdb/index.html" class="uri">https://cfpb.github.io/api/ccdb/index.html</a></span> and Rozzi (2021).<label for="tufte-sn-4" class="margin-toggle sidenote-number">4</label><input
            type="checkbox" id="tufte-sn-4" class="margin-toggle"><span class="sidenote"><span class="sidenote-number">4</span> Rozzi, G. (2021). <em>Data &amp; functions for working with US zip codes</em>. GitHub. <a
              href="https://github.com/gavinrozzi/zipcodeR/" class="uri">https://github.com/gavinrozzi/zipcodeR/</a></span>
        </td>
      </tr>
    </tfoot>

I realize it's not all that pretty. While I will likely modify the HTML directly, I didn't write it. It was generated through the use of R Markdown. I typically find that tables can be far less painful, for how often I'm using it, to adjust in the script.

When I render the HTML, there's this huge gap between the table and the next line of text. This is what's happening in the HTML when I run the script:

enter image description here

However, when I use the margin outside of the table, I don't have this problem. (Don't mind the writing; it's definitely not proofread.) If you look, you can see that the second margin note in this image is not impacting the next <p></p>.

enter image description here

Please let me know if there is other information I could provide to get help faster.

Solution

  • It may not be right, but it works. I took the footer off the table and added a

    block with the footer content. Issue solved. I don't know why I didn't think of that sooner. (sigh)

    enter code here