CSS to Change Table Width

API & Customization
1

Hi,

Does anybody know how I can prevent a Table always filling out to 100%?

If you only have 2 or 3 columns it looks terrible if these are full screen width.

Thanks.

2

Thanks Dean.

Here is what I found to work best so far after much trial and error.

If anybody can improve upon it I would welcome the feedback.

Note use of !important at the Application level.

/* At a View level */
/* */
/* Table */
#view_695 table.kn-table-table {
width: unset;
}
/* Report (e.g. Pivot Table) */
#view_695 .kn-report-row .column {
flex-grow:0;
}


/* Same at a Scene level */
/* */
#kn-scene_352 table.kn-table-table {
width: unset;
}
/* Report (e.g. Pivot Table) */
#kn-scene_352 .kn-report-row .column {
flex-grow:0;
}


/* Application wide needs use of !important */
/* */
/* Table */
table.kn-table-table {
width: unset;
}
/* Report (e.g. Pivot Table) */
.kn-report-row .column {
flex-grow:0!important;
}

3

![](upload://r7XnqCbD7EhmverQbP4s4GkuXb6.jpeg)

4

I will throw some more in here as you start making changes you may want to center more items in the page:

/* Center Tables and set to 80% page width */
.kn-contenttable{
width:80%;
margin-left:auto;
margin-right:auto;
}

/* Center Menus */
.control {
position:relative;
text-align:center;
}

/* Center headers */
h1, h2, h3, h4, h5, h6 {
text-align:center;
}