0

I have created a theme from jQuery theme roller and applied it to a table (DataTable.net).

The problem is that the roller is applying the width to the table using jQuery, overriding my attempts to define the width in my css-file. This would have been fine if it wasn't because there are a few extra px which makes the scroll-bar appear. I want to have a width so the bar is not visible before the user perhaps increase the size of a column.

I have tried to decrease the size of a column but that size is re-distributed to the other columns I believe.

Anyone having any idea how to override the style the roller adds?

Nicsoft
  • 3,644
  • 9
  • 41
  • 70

2 Answers2

2

I believe ThemeRoller themes give 100% width by default. The beauty of this is that all you have to do is wrap it up in another container. To absolute die-hard semantics purists, this is an extra node in the DOM that doesn't serve the best possible purpose in terms of markup. Myself, I'm quite willing to add a wrapper in cases like this.

I'm using ThemeRoller and a grid of DataTables (so, not 100% of the page width!) Here's the skeleton of my markup:

<div id="someTable" class="halfbox">
  <table id="dataTable-foo"></table>
</div>

And the CSS has a few rules, but boils down to:

.halfbox { width: 50%; /* or fixed pixel value */ }

I would doubt 50% would literally work perfectly (margins, padding, etc.) but you get the idea: it's the wrapper that determines the width, not the table.

Greg Pettit
  • 10,749
  • 5
  • 53
  • 72
  • Actually, I'm using DataTables as well. I think one of the problems was that I had overflow:scroll; on a div-wrapper. Removing that one removes the scroll bar. However, when increasing the size of a column (ColReorderWithResize) the no scrollbar appears but the table uses the default overflow value and grows out of the div. I guess I have to check out the scroll-features of DT now... – Nicsoft Mar 31 '12 at 08:10
  • I tried your suggestion and using overflow:auto on that div. But it doesn't matter. The problem is that I cannot set the width of the table, hence it is always a little bit to wide so the scrollbar will appear. Isn't it like this for you? Using DT sScrollX makes the table >2500px wide...guess it is because I don't define the size of each column upon init of the table. – Nicsoft Mar 31 '12 at 08:36
  • 1
    Nope, no scroll bar. I do not set the sizes of all columns, either. I do manually specify a FEW, but not all. Here's the thing about tables, though: widths of columns are always a guideline. If your table "has to", it will become wider to fit your content. I suspect this is your problem. I didn't mention in my answer above, but my TD elements also have both `overflow: hidden` and `text-overflow: ellipsis` set on them (the latter has limited browser support, but I can live with it). – Greg Pettit Apr 01 '12 at 00:50
  • Me to actually (added text-overflow after reading your comment). Hence, not the issue. Well, it's not like it can't be used as it is now, it's a matter of details (which still is important though). I will dig deeper later, higher priority things are waiting for my attention. – Nicsoft Apr 02 '12 at 07:11
-2

If you set the width using CSS in the style attribute, it should override any rules within the stylesheet. Additionally, try adding "!important" to the end of the rule.

.element { width: 100px !important; }
ryanmcdonnell
  • 162
  • 2
  • 5
  • !important is a last resort. All you need is to have a more recent rule of the same specificity which as you say should override any other rules. Or if order is out of your control, make it more specific. `#container .element` will "win" for example. You don't want to engage in too much specificity war, but kept under control it's a better option than !important – Greg Pettit Mar 30 '12 at 19:20