CODEWITHSUNDEEP
jqueryhtmlcssdatatables
M. Gar
M. Gar

Reputation: 885

Responsive column width-height size

To show some data I use JQuery DataTables but I need to limit the max-width for one of my column to 200px so in my .css file use this rule:

table tbody > tr > td {
    max-width: 200px;
}

That limit the width of the columns but if the content it's longer that 200px invade the next column and mix with the content of the next column.

What I need is, if the content is longer tha 200px the cell expand the height and the content continue in the next line.

So I tried to use the options for jdatatables:

$('#idTable').DataTable({
            "columns": [
                null,
                null,
                null,
                null,
                null,
                { "widht": "200px" },
                null,
                null,
                null,
            ],
        });

But that doesn´t change anything

My table tag looks like this:

<table width="100%" class="table table-hover display nowrap" id="idTable" cellspacing="0">

Sorry for my bad grammar, if you need more info just ask me.

Upvotes: 0

Views: 174

Answers (1)

Giri
Giri

Reputation: 565

this should work,

table tbody > tr > td {
    max-width: 200px;
    overflow:hidden;
}

Upvotes: 1

Related Questions