How to avoid line break in responsive table? | XM Community
Skip to main content

How to avoid line break in responsive table?

  • April 17, 2022
  • 1 reply
  • 559 views
M
Forum|alt.badge.img

Hi all,
I'm trying to insert a table into one of my questions. Unfortunately, the formatting is messed up when the table becomes sufficiently narrow, such as mobile mode. This only happens in qualtrics. Outside of qualtrics, the table looks just fine.
Here is a picture of the problem:
Screen Shot 2022-04-16 at 9.59.10 PM.pngAs you can see, in the mobile mode, the choices are on top of each other. They should fall into the columns.
I don't know why this happens and I'm not particularly good with HTML and CSS. The javascript should work fine and just feeds values into tags by id.
Below is the CSS and HTML of the table.
Thank you!
Madamimadam



    


      
        
          
          
          
        
      
      
        
          
          
          
        
        
          
          
          

        
        
          
          
          
        
        
          
          
          
        
        
          
          
          
        
        
          
          
          
        
        
          
          
          
        
        
          
          
          
        
        
          
          
          
        
      
    

          
            Choice 1
          
            Choice 2
          
A
B
C
D
E
F
G
H
I

1 reply

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • April 18, 2022

If I remember correctly, Qualtrics has media rule for table cells with a 

display: block !important
 which may be causing the new lines. You can confirm using your browser's inspect feature.
Anyway, if that is the case, you'll need to override it with your own, more specific !important rule. You should probably add a class to your table so you can set up rules that apply specifically to your table and don't impact Qualtrics tables (matrix questions, etc.).

Terms & ConditionsAccessibility statement