dataTables-wrapper width

JochenK · January 2021

Hey there,
How can I control the width of the dataTables_wrapper?? It sets itself to 100% regardless ( max 1020px) , and I'd really like it to set itself to an width around 120 0px. Any ideas?

Thanks a lot
Jochen

colin · January 2021

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

JochenK · January 2021

Colin,
i make a test case live.datatables.net/lopevege/1/edit http://

The table should be responsive with fixedColum.
Please try the pagination numbers and you will see that x-scrollbar by different numbers disappears.

Furthermore, I would like to expand the table in width, so that the middle row area ( color:lavender ) is filled.
Is there a solution?

Cheers, Jochen

JochenK · January 2021

Colin,
Another addendum to the previous text:
When I used "table-bordered" in the table tag, pagination works fine,but the first column on the left gets its own scrollbar.

colin · January 2021

The table isn't initialising. There are no errors, but something isn't right - could you take a look, please,

Colin

JochenK · January 2021

Hmmm...take a look ....ok, but i can't find an error. I have no idea what could be wrong!
I have tried with newest Firefox and IE.

http://live.datatables.net/lopevege/1/edit

JochenK · January 2021

Hi Colin,
it seems that i found a workaround:
the js-file "dataTables.responsive.min.js" make the trouble, if this file is not used everything looks fine.
That is not the solution because the table is now not responsive. How is this to be solved now?
And the another problem is:
When I used "table-bordered" in the table tag the first column on the left gets its own second scrollbar.

JochenK · January 2021

the aktuell test case is http://live.datatables.net/lopevege/3/edit

allan · January 2021

In that link, there is the following CSS:

    div.dataTables_wrapper {
        width: 900px;
        margin: 0 auto;
    }

So the table won't be dynamic in width, it will just be 900px. You could use max-width: 900px if you didn't want it wider than that.

Allan

JochenK · January 2021

I have used know max-width and the responsive-problem is solved .... thanks.
But what about table-bordered? Is it not possible tu use with fixedColumns?

JochenK · January 2021

In the responsive-examples here I see that the columns are responsive. It is possible that fixedColumns with responsive doesn't work ? in the test case i have set all necessary responsive-options. http://live.datatables.net/lopevege/5/edit

colin · January 2021

Yep, FixedColumn extension and Responsive are incompatible I'm afraid - see the compatibility matrix here,

Colin

JochenK · January 2021

Hmm.... i see ... ok, but that is very unfortunate.
And it is known, that table-bordered doesn't work with fixedColumns?

Thanks for yourhelp

colin · January 2021

Yep, they should work - see here: http://live.datatables.net/sodukama/1/edit

Colin

colin · January 2021

p.s. and sorry about not picking up on that incompatibility in your earlier posts in this thread, I totally missed that.

colin · January 2021

And please ignore the example in that top comment, the bin is corrupted, please go here instead: http://live.datatables.net/pegageji/1/edit

JochenK · January 2021

ok..thanks for your help ...for my first problem fixedCoumns / responsive i try to find another solution for my work.

JochenK · January 2021

if i want to change the color of the fixedColumn can i do this in the fixedcolumns.css or is it only possible with a function?

colin · January 2021

You can modify your project's CSS, something like this: http://live.datatables.net/pegageji/3/edit

Colin

JochenK · January 2021

Thanks, this is a great help for me. Are the possibilities described somewhere in a referenz manual ( i can't find any here ) to use css-tags, for example _DTFC* or when i have <a href.... in the fixedColumn and that href shout be change color when hover it ?

JochenK · January 2021

For information : I noticed that I have to use !important in css in my program environment, otherwise the color will not be changed

.DTFC_Cloned td {
background-color: #58ACFA !important;
}

colin · January 2021

Not documented, as that's standard CSS stuff. Glad all working!

Colin

JochenK · January 2021

Smile ... you are right..it's CSS standard, i know. But i think that CSS-Tag .DTFC_cloned is part of any CSS-File and that is what i mean.
But ok..i will try to find

Thanks for your help so far, has been very insightful.

Vanq · January 2022

Hey there is there a way to set the column width for each column?
The following code should work in theory but doesn't. It won't change the width of the first column.

columnDefs: [
          { targets: [12], searchable: false },
          { targets: [12], visible: false },
          **{ targets: [0], "width": '20px' }**,
        ],

Is there something like this

div.dataTables_wrapper {
      padding-left: 10px;
      padding-right: 10px;
      width: 100%;
      margin: 0 auto;
    }

that sets the width of columns and not the whole table?
Thanks.

colin · January 2022

@Vanq Yep, columns.width is the way to go - there's discussion about it on this thread.

If that doesn't help, 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

Vanq · January 2022

@colin Thanks for your response. I could kind of change the width of the columns with the help of that thread you linked but it doesn't seem to work properly. There is the issue with the overflow.
I now have created a test case

http://live.datatables.net/nojeceda/1/edit?html,css,js,console,output

What I want is to be able to resize the column widths of columns that consist of long texts and have columns that only show the ID to be short.
I also seem to have a problem with the header not matching my table.
Isn't there a way to resize the column width inside my web app with drag and drop like in Excel, that would be very user friendly since the contents of my table vary quite a bit in length.
Thanks!

allan · January 2022

Isn't there a way to resize the column width inside my web app with drag and drop like in Excel

No sorry. That isn't a feature of DataTables at this time. It might be something we add in future, but there are no immediate plans for it.

The column widths are difficult in real table elements. It is almost certainly why so many other table components use div elements rather than the proper table. When we set your 100px width to the column, the browser can overrule that, and tries to collapse the table to fit onto the screen. The table-layout: fixed resolves that.

What is messing with your layout now is the input elements. They have a browser pre-defined width. We can override that with:

tfoot input {
  width: 100%;
}

Giving: http://live.datatables.net/nojeceda/2/edit

Allan

dataTables-wrapper width

dataTables-wrapper width

Answers

Howdy, Stranger!

Categories

DataTables

dataTables-wrapper width

dataTables-wrapper width

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables