question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Rendering HTML Tables with nested lists parses incorrectly

See original GitHub issue

Hi there!

I have come upon a use case where we need to render tables, with lists nested within them. I have tested on prior versions of the component (v6.4.1) and the issue is not present. It seems to have started since 6.5.0.

This is an example using 6.4.1 - https://stackblitz.com/edit/react-qugqd6 This is an example using 6.6.1 - https://stackblitz.com/edit/react-6nelfr

You’ll notice when using 6.6.1, it renders trailing </li> tags for some reason.

screen shot 2018-04-02 at 9 10 37 am

This is the HTML i’m using

<table border="1">
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
  </tr>
  <tr>
    <td>left</td>
    <td>
      <p>Start of table</p>
      <ul>
        <li>List 1</li>
        <li>
          <ul>
            <li>Nested List 1</li>
          </ul>
        </li>
        <li>
          <ul>
            <li>list 2</li>
          </ul>
        </li>
      </ul>
    </td>
    <td>right</td>
  </tr>
</table>

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:7 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
probablyupcommented, May 6, 2018

Released as 6.6.2

1reaction
probablyupcommented, May 2, 2018

I’ll take another look this weekend.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Using nested lists instead of tables for displaying data in HTML
Instead of using HTML tables, I'm thinking of just using nested list structures to display table-like data going forward. For example: <div class= ......
Read more >
Improve HTML parsing for emails containing nested tables - Jira
Problem Definition. Emails containing HTML tables that are nested (smaller tables within main table) nested. For example will not be parsed correctly in...
Read more >
Table Techniques to Avoid | Web Accessibility
Nested (embedded) tables should never be used. Covered in this Tutorial: Introduction; Poor Table Structures. Multiple Headings on a Row or Column; Multi-Cell...
Read more >
<table>: The Table element - HTML - MDN Web Docs - Mozilla
The HTML element represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells ...
Read more >
Fix Your Site With the Right DOCTYPE! - A List Apart
Per HTML and XHTML standards, a DOCTYPE (short for “document type ... browser will attempt to parse your page in backward–compatible fashion, rendering...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found