Shrink a table

Hi,


I have a question and thinking about how to do it. I want to shrink a table to fit the screen or just make it smaller than it is.

It's very big and I don't know how to reduce it, I tried to change the width, but nothing happens hahaha does anyone know how?


Thanks in advance!

Hello Giovanna.

You have many columns!


Your first option should be to choose some columns to delete.


The option you asked for is to reduce the font size and padding/margins. The table will be smaller.


The final option (lazy one) is to embrace its full width and use a horizontal scroll 

overflow-x: auto; display:block;

Nuno Reis wrote:

Hello Giovanna.

You have many columns!


Your first option should be to choose some columns to delete.


The option you asked for is to reduce the font size and padding/margins. The table will be smaller.


The final option (lazy one) is to embrace its full width and use a horizontal scroll 


overflow-x: auto; display:block;


Hi nuno, got it

But, is there another way to simply shrink the table? Because as I will need all the columns and the font size is exactly standard and good for the application, I didn't want to touch it :(



If you shrink the table, you shrink the content.

You can try to force the table to fit. This CSS will break sentences on each possible white space to make it smaller:

table {
    table-layout:fixed;
}

td {
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
}

(Haven't tried in OS but this is regular CSS and should do the trick)

I agree with Nuno, you have too many columns, for clarity it would be good to remove some of those and maybe create a 'view details' button that will pop up some sort of modal or popup window with more detail. This is a case where you might have to go to the end users and ask "of all this info, pick your most used top 5" and chop it down to that

Otherwise, as Nuno also pointed out, your information will be shrunk down and even truncated if you make the table smaller. What's the use of a column where all I can see is chopped words with (...) ellipsis?

Giovanna Hortolã wrote:

Hi,


I have a question and thinking about how to do it. I want to shrink a table to fit the screen or just make it smaller than it is.

It's very big and I don't know how to reduce it, I tried to change the width, but nothing happens hahaha does anyone know how?


Thanks in advance

Hello der,

Is this a reactive web application or traditional?

I am agree with the workaround given by Nuno but it seems a bug in platform itself.

changing the display property of table may create some issue  also in the responsiveness may affect due to this.  


Best Regards,

Pankaj Pant