How do I adjust a column width so it fits data under the column?

oreo

I have a column and I have data entered under the column. The data is rendered by joining the elements in an array with \n.

The problem is when the data is shown in the table, it is shown as one line and the \n are seen as spaces. If I manually adjust the width using columns.width for the column to a small value, then you can clearly see each element is rendered in one line as I want to.

However, I want to know if there is another way for the column width to be automatically decided. I have tried autoWidth to be set to false and true, but that did not work for me.

Here is the codepen: https://codepen.io/rxxx/pen/YzeVpMG

kthorngren

HTML uses <br> for line breaks not \n. Try replacing your \n with <br>.

Kevin

oreo

Thank you, that seemed to be part of the solution. Now the data is shown in a newline for every element in the array.

However, the width of the column is still not being adjusted automatically and I still have to manually change using columns.wdith

kthorngren

Maybe the example data in your test case is not showing the problem. Are you expecting the column to shrink to match the width of the largest line in the Days column?

Please update the test case to show the issue you are trying to solve.

Maybe you need to add style="width:100%" to the table tag as shown in this example.

Kevin

oreo

Yes I am expecting the column to shrink to match the width of the largest line in the Days column.

I tried doing what you suggested and followed that example but that does not do what I expect. You can see from my codepen.

colin

I'm not clear what the issue is here. As there are only three columns, they spread out along the available space. The table itself won't shrink, so the columns will always use that width. Please can you give more details on what's happening for you, and what you would expect to happen instead.

Colin

oreo

My apologies for a poorly worded question.

I have found that adjusting the width of the table using style="width:x%" will get me a table I desire.