Can you provide the actual CSS you're using? The #q IDs need to be present for each of the collections/tables.

#q143, #q148, #q151 {display: inline-block}

Please see my follow up to Erik's post. You also need to adjust the width of the elements; technically the inline display is working, but the elements are the same width as the form so there's no room for them to be side-by-side.

So would it be like this?

}
  
 /*Three tables*/

 #q143, #q148, #q151 { 
   display: inline-block;
   width: 33%;
}

That looks like it should work assuming the IDs are all correct.

No it didn't work.

I do appreciate the time you have taken to help me with this. I have been researching it and cannot seem to get it to work correctly.

UPDATE: I think I see the problem. Your using #q143, #q148, #q151, but in your screenshot those appear to be the underlying fields, not the Tables.

It looks like it should be the #q150,#q153, etc. (I can't see the third one). Basically, you need to use the "q" value next to where the Class has "cf-table-block" not the one below it

var processUtcOffset = '-06:00:00'; var jsonForm = {"formId":21,"name":"Job Safety Analysis","description":null,"title":"Job Safety Analysis","tags":null,"isPublic":false,"autoIndex":null,"jsondata":null,"formwidth":1000,"labelWidth":20,"labelPos":"top","themeid":1053,"previewthemeid":null,"previewlogo":null,"previewcss":"","customcss":".Sign_In .form-del-field {display:none!important}\u000a\u000a\u000a} \u000a   \u000a \/*Three tables*\/ \u000a\u000a #q143, #q148, #q151 {  \u000a   display: inline-block; \u000a   width: 33%; \u000a} \u000a\u000a\u000a\u000a","formjs":"\/\/\u000a$(document).ready(function () {\u000avar column1 =

This is what I see. I do not know what I am seeing to be honest.

Hi Gina, check my last post. I think I figured out why it isn't working.

So I do need to add "!important" at the end of it?

Like this?

}
  
 /*Three tables*/

 #q143, #q148, #q151 { 
   display: inline-block;
   width: 33%; !important
}

No, the problem isn't the styling, it is the selectors you are using.

You need to go one level up because the 143, 148, and 151 IDs are referencing the child elements within the tables, not the table itself.

Yup, that is exactly what I just replied with as well. You are using the wrong #ID's those are selecting the columns not the entire table itself. Change the Id's and they will line up beside each other, but likely not straight, then use the
" vertical-align: top; " and you should be good to go. You may need to make some sizing adjustments in the layout tab on the actual tables themselves to make it look how you want, but that should get them lined up for you.

#q147, #q150, #q153 {
   display: inline-block;
   width: 33%;
  vertical-align:top;
}

I changed it and it made the boxes smaller but did not put them side by side.

When you are in the layout tab, check the table width in the advanced tab for each table. I just tried it on mine and it worked fine (keep it on auto), so there must be something else conflicting with the CSS you are trying to do. You may also need to adjust field sizes and such until you get it looking how you want. If the fields are too big there will be no space for them to line up side by side. You can also adjust column, field and row label size on the layout tab.

I looked in the advance tab and I do not have anything in the CSS field. I do have

.Sign_In .form-del-field {display:none!important}  in the CSS and Java Script tab. Could it be the culprit?

I was referring to the advanced tab on the layout, in the actual table field.

That's correct. I do not have anything in the advance tab

I do have this in the CSS and JavaScript tab.

It is adjusting the size its just not placing them side by side.

Gina,

The extra colon after "inline-block" is breaking the CSS.

You don't need the !important, and I don't think the vertical alignment is needed, so the following would be sufficient.

#q147, #q150, #q153 { 
  display: inline-block;
  width: 33%;
}

For future reference, if you ever do need to use !important, it should come after the style setting and before the semi-colon with no additional characters in between.

For example,

.h2 {
    color: red !important;
}

The additional colon you added breaks that line of the CSS, which is preventing the inline-block display style from being applied.

I put it in there but for some reason it will adjust the size but it does not place them side by side.

Can you open it in Preview and post a screenshot of that? The screenshot looks like you're still in the CSS/JavaScript tab.

I was and I will.

It worked!!! Oh my gosh Thank you