Problem with the width of the columns

Kamil_G

I have a problem with the width of the columns.

Column descriptions are generated separately and the content in the table is generated separately. I use ASP.NET MVC RAZOR for this.

How do you use JQuery to set the same width for the columns selected in the picture? My goal is for the red lines to be aligned with the green, and the contents of the columns were centered.

colin

Hi @Kamil_G ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

Kamil_G

Hi @colin ,
Below I am posting a link to your website. Exactly, I have a ladder that is presented.

http://live.datatables.net/movofiqa/1/edit?html,js,output

kthorngren

Thanks for the example. Instead of directly updating the cell classes using jQuery you should use Datatables to add the class. I used columns.createdCell for this example:
http://live.datatables.net/vibinina/1/edit

Kevin

allan

The issue is that you are applying the FontAwesome icons to the table cells. That is causing FontAwesome to use display: inline-block on the td elements, hence the alignment error.

You'd need to contact the FontAwesome folks to check if they consider that a bug or not, but I suspect not. My guess is that they would tell you to put an i tag inside the cell and apply the FontAwesome styles / classes to that.

Allan