Columns Width for tables from web service | XM Community
Solved

Columns Width for tables from web service

  • 1 September 2019
  • 6 replies
  • 143 views
C
How can I manage the width of columns of a table within a question?
The table is created using a "web service" component (not a qualtrics question type), and currently qualtrics presents the columns with different widths.
icon

Best answer by TomG 2 September 2019, 23:08

View original

6 replies

TomG
Rank
Userlevel 7
Badge +27
Set the width (width attribute or width property in the style attribute) on the first cell in each column.
C
I am not sure how to do that, for a table that is not generated within Qualtrics. Can you please provide some additional instructions?
TomG
Rank
Userlevel 7
Badge +27
> @ClaraT said:
> I am not sure how to do that, for a table that is not generated within Qualtrics. Can you please provide some additional instructions?

If you control the web service, you could update it to set the widths. If not, you can set the widths using JavaScript. Find the table element and set its width to 100%. Then find the cells within the first row of the table and set their widths (preferably by 😵.
C
@TomG , thank you for your advice, I got this.
For the use of others: - what I did was to enter the HTML view of the question, and insert the following:
width=20%
width=40%
width=40%

as is below:

!



Of course you can change the size of columns as you wish using %:

@MCBWise
S
Badge

we encountered the exact same problem, however, defining the column width in html did not solve it. Are there any other approaches? @TomG What is the JavaScript approach you were describing?

TomG
Rank
Userlevel 7
Badge +27

https://community.qualtrics.com/XMcommunity/discussion/comment/48344#Comment_48344Several thoughts:

  • The widths in the html provided above should have been in quotes

  • Using css widths (e.g. 
    style='width:25%;'
    is generally more effective that the width attribute (they aren't exactly equivalent).

  • A more flexible approach is to assign classes to html elements then use custom css to format them. If you control the web service, this is a better approach than JS.

  • If you use JS, find the cells in the first row of the table and set their css width.

Leave a Reply


Terms & Conditions