Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

nested table not beautified correctly #1649

Closed
JamesMackerel opened this issue Mar 24, 2019 · 1 comment
Closed

nested table not beautified correctly #1649

JamesMackerel opened this issue Mar 24, 2019 · 1 comment
Labels
language: html type: bug
Milestone
v1.9.1

Comments

@JamesMackerel
Copy link

JamesMackerel commented Mar 24, 2019 •
edited
Loading

Description

Nested tables are not correctly beautified.

This is the minimum code to reproduce this issue, you have to make at least one column in the inner-table, otherwise the program will run well.

I don't know if it's ok to use table in a table. But I was writing a spring mvc thymeleaf template, I wanted to render table modals in each outer-table line. I was using vim-autoformat plugin, and I have tested this issue in command line as well, both reproduced.

Input

The code looked like this before beautification:

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <table>
    <thead>
      <th></th>
    </thead>

    <tbody>
      <tr>
        <td>
                                                                                                                                                                                              
          <table>
            <thead>
        <th>
        </th>
        </thead>
    <tbody>
      <tr>
        <td>
        </td>
      </tr>
    </tbody>
  </table>

  </td>
  </tr>

  </tbody>

  </table>
</body>

</html>

Expected Output

The code should have looked like this after beautification:

<!DOCTYPE html>                                                                                                                                                                               
<html>                                                                                                                                                                                        
                                                                                                                                                                                              
<head>                                                                                                                                                                                        
</head>                                                                                                                                                                                       
                                                                                                                                                                                              
<body>                                                                                                                                                                                        
  <table>                                                                                                                                                                                     
    <thead>                                                                                                                                                                                   
      <th></th>                                                                                                                                                                               
    </thead>                                                                                                                                                                                  
                                                                                                                                                                                              
    <tbody>                                                                                                                                                                                   
      <tr>                                                                                                                                                                                    
        <td>                                                                                                                                                                                  
                                                                                                                                                                                              
          <table>                                                                                                                                                                             
            <thead>                                                                                                                                                                           
              <th>                                                                                                                                                                            
              </th>                                                                                                                                                                           
            </thead>                                                                                                                                                                          
            <tbody>                                                                                                                                                                           
              <tr>                                                                                                                                                                            
                <td>                                                                                                                                                                          
                </td>                                                                                                                                                                         
              </tr>                                                                                                                                                                           
            </tbody>                                                                                                                                                                          
          </table>                                                                                                                                                                            
                                                                                                                                                                                              
        </td>                                                                                                                                                                                 
      </tr>                                                                                                                                                                                   
                                                                                                                                                                                              
    </tbody>                                                                                                                                                                                  
                                                                                                                                                                                              
  </table>                                                                                                                                                                                    
</body>                                                                                                                                                                                       
                                                                                                                                                                                              
</html>

Actual Output

The code actually looked like this after beautification:

<!DOCTYPE html>                                                                                                                                                                               
<html>                                                                                                                                                                                        
                                                                                                                                                                                              
<head>                                                                                                                                                                                        
</head>                                                                                                                                                                                       
                                                                                                                                                                                              
<body>                                                                                                                                                                                        
  <table>                                                                                                                                                                                     
    <thead>                                                                                                                                                                                   
      <th></th>                                                                                                                                                                               
    </thead>                                                                                                                                                                                  
                                                                                                                                                                                              
    <tbody>                                                                                                                                                                                   
      <tr>                                                                                                                                                                                    
        <td>                                                                                                                                                                                  
                                                                                                                                                                                              
          <table>                                                                                                                                                                             
            <thead>                                                                                                                                                                           
        <th>                                                                                                                                                                                  
        </th>                                                                                                                                                                                 
        </thead>                                                                                                                                                                              
    <tbody>                                                                                                                                                                                   
      <tr>                                                                                                                                                                                    
        <td>                                                                                                                                                                                  
        </td>                                                                                                                                                                                 
      </tr>                                                                                                                                                                                   
    </tbody>                                                                                                                                                                                  
  </table>                                                                                                                                                                                    
                                                                                                                                                                                              
  </td>                                                                                                                                                                                       
  </tr>                                                                                                                                                                                       
                                                                                                                                                                                              
  </tbody>                                                                                                                                                                                    
                                                                                                                                                                                              
  </table>                                                                                                                                                                                    
</body>                                                                                                                                                                                       
                                                                                                                                                                                              
</html>

Steps to Reproduce

Environment

OS: Ubuntu 18.04 LTS

with default settings.
@bitwiseman bitwiseman added this to the v1.9.x milestone Mar 25, 2019
@bitwiseman
Copy link
Member

Technically, it looks like the thead must have a tr inside it:
https://www.w3.org/TR/html5/tabular-data.html#elementdef-thead

That said, it shouldn't unwind that far if one is missing.

bitwiseman added a commit to bitwiseman/js-beautify that referenced this issue Mar 25, 2019
@bitwiseman
Limit tag auto-close for td and th tags
fc3337a 
Fixes beautifier#1649
@bitwiseman bitwiseman modified the milestones: v1.9.x, v1.9.1 Mar 25, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
language: html type: bug
Projects
None yet
Milestone
v1.9.1
Development

No branches or pull requests
2 participants
@bitwiseman @JamesMackerel