I am using the jDataTable plugin. I have given bAutoWidth as false, both in the plugin settings and on the page where I used {arijdatatable bFilter="true" bSort="true" bStateSave="true" bAutoWidth="false"}
I am still not able to control column width and also there is a lot of space between one table and the next.

Here is the page: tdudevtest.com/QA/class-schedule

Can you please help?

Thank you.

Hello,

You can read this post on our forum, it contains information how to create columns in ARI JDataTable with fixed size.

Regards,
ARI Soft

I added the css code to my template and set the autowidth as false. I have a html table and I defined the column width for each column. I am still not getting fixed column width.

Page: tdudevtest.com/QA/class-schedule

It seems that 'CSS Template' is disabled because if open page source, it doesn't contain including of any 'CSS Template'. Could you provide plugin code which you use and CSS rules?

Regards,
ARI Soft

Thank you for trying to help me with this.

I added {arijdatatable bFilter="true" bSort="true" bStateSave="true" bAutoWidth="false"}

at the top of each table on the tdudevtest.com/QA/class-schedule page.

Here is the CSS template. I added the table.fixedwidth at the end of the tempalate

/* Style 1 */

a,
h2,
.componentheading {
color: #F68933;
}

/* @group Structure */

#logo {
background: url(../images/style1/logo.png) 0 0 no-repeat;
}

#showcase {
background: white url(../images/style1/showcase-bg.png) 0 0 repeat-x;
}

#showcase2 {
background: url(../images/style1/showcase-promo.jpg) 50% 0 no-repeat;
}

#featured-mod {
background: url(../images/style1/featuremod-bg.png) 50% 0 repeat-x;
}

#featured-mod2 {
background: url(../images/style1/featuremod-bg2.jpg) 50% 0 no-repeat;
}

/* @end */

/* @group Horizontal Menu */

#horiz-menu {
background: url(../images/style1/horiz-menu-bg.png) 0 0 repeat-x;
}

#horiz-menu ul ul {
background-repeat: repeat;
background-image: url(../images/style1/tdu-menu-bg.png);

}

#horiz-menu ul ul ul {


}

#horiz-menu li a {
color: white;
background: url(../images/style1/horiz-menu-div.png) 100% 50% no-repeat;
}

#horiz-menu a {
text-transform: uppercase;
color: #fff;
}

#horiz-menu li.active a {
text-transform: uppercase;
color: #8E3C00;
}

#horiz-menu li.active a {
color: #8E3C00;
}

#horiz-menu a:hover {
color: #8E3C00;
}

#horiz-menu ul ul li a,
}

#horiz-menu ul li.active.parent ul a {
background: url(../images/style1/dropdown-arrow.png) 10px 50% no-repeat;
color: #FFFFFF;
}

/* @end */

/* @group Main Menu */

a.mainlevel {
background: url(../images/style1/vertmenu-bg.png) 0 0 no-repeat;
color: #666;
}

a#active_menu.mainlevel,
a.mainlevel:hover {
color: #8E3C00;
}

a.sublevel:hover,
a#active_menu.sublevel {
color: #8E3C00;
}

a.sublevel {
color: #666;
}

/* @end */

/* @group Sub Menu */

ul.menu a {
background: url(../images/style1/vertmenu-bg.png) 0 0 no-repeat;
color: #666;
}

ul.menu li.active a,
ul.menu li a:hover,
ul.menu li.parent li.active a,
ul.menu li.parent li.parent li.active a,
ul.menu li.parent li.active a:hover,
ul.menu li.parent li.parent li.active a:hover,
ul.menu li.active a:hover {
color: #18A7E1;
}

ul.menu li.parent li a,
ul.menu li.parent li.parent li a {
color: #666;
}

/* @end */

.rok-content-rotator h2 a:hover,
.rok-content-rotator h2 a.active,
#rokslide-toolbar li.current {
color: #178FC0;
}

/* @group Typography */

ul.bullet-1 li {
background: url(../images/style1/dropdown-arrow.png) 0 3px no-repeat;
}

ul.bullet-2 li {
background: url(../images/style1/bullet-2.png) 0 3px no-repeat;
}

ul.bullet-3 li {
background: url(../images/style1/bullet-3.png) 0 3px no-repeat;
}

ul.bullet-4 li {
background: url(../images/style1/bullet-4.png) 0 3px no-repeat;
}

ul.bullet-5 li {
background: url(../images/style1/bullet-5.png) 0 3px no-repeat;
}

.important2 {
border: 1px solid #178FC0;
}

span.highlight-color {
background: #178FC0;
color: #fff;
}

span.important-title2,
span.number-color,
blockquote.color2,
span.dropcap-color {
color: #178FC0;
}

.dataTables_wrapper {
min-height:180px !important;
_height: 1%;
}

TABLE.fixedLayout
{
table-layout: fixed;
}

Hello,

It seems that you don't apply 'fixedLayout' CSS class to HTML tables. Add class="fixedLayout" to tables on your page, please. And you can add CSS rules for ARI Smart Content plugins in 'CSS Templates' section on the component backend.

Regards,
ARI Soft