So let's say the table has 10 columns but I want to show only 5 columns and the remaining 5 need to be in the collapse element, regardless of the table width or the responsive property.
col1
col2
.....
data
data
data
collapse
...
...
I managed to make it sorta work by setting widths of the first five columns so that they take up the entire table width. But run into problems when the window is expanded.
the columns in the collapse group end up occupying the extra space and the collapse effect is gone.
I want some columns to be in the collapsible div whatever happens.
This is not the point of the responsive collapse system im afraid, its purpose is to hide columns where there is no space for them.
If you always want to show that data in the row under the columns then you should look at using the rowFormatter to add a dive that contains the elements after the columns and only define the first 5 columns in the columns array.
Checkout the Row Formatter Docs for more details.
There is also a Row Formatting Example that shows just how much the row formatter can change things
Related
I have a HTML table that displays data from a number of different products. Each row of product data is followed by a table spanning row that shows more details about the product. In my table I allow the user to show or hide these details as they wish. The problem I have is that when this data is shown the column widths resize even though the details row spans the whole table. I have narrowed the problem down to inline-block elements that are present in the details row. When these elements wrap, the column widths for some reason get affected.
In the picture below you can see the effect taken from this fiddle: https://jsfiddle.net/6qanb8dk/. The widths of the columns all change slightly due to the wrapping inline-block elements in the details part of the second table, which is otherwise identical to the first table. Here the effect is not huge but in my actual application the table moves around enough to be annoying to the user. I would like to know why this is happening and how it can be prevented.
How can I create columns like on attached image? I don't know how to set space between all columns. Please any hint.
You could add a margin to you columns. To have 4 columns, you'd start with a div with the class="row" then inside of that a div with the class=col-md-3 (or whichever size you want the 4 columns across), and give that div a margin-right of however many px's you want. Your final column (the 4th one in the row) probably should not have the margin-right if your design has the columns centered on the page. Bootstrap automatically gives columns 15px on either side. If you need to look up more information about how it works, the space between columns is called the "gutter" so you could search "gutter width" for example to find different ways of working with it.
I have a simple HTML table, 100% width, with 4 columns ...
When the table is very large and the data in the columns is small I get a large space between columns ...
Would be possible to make all the columns next to each other and leave that white space only on the last column?
Not sure if this helps, but you could give the first three columns a width (if you know what width you want) and leave the fourth unspecified. The fourth column will then auto-adjust to take up the 'slack'.
I've found a very strange behavior of a HTML table, where the width allocation of the cells depends on the count of rows. If I have 2 rows the cells have all the same width but when I insert another row the first column expands a little and the second column is narrower than the others.
I have uploaded an example on fiddle.
You can see this behavior when you delete the comment around the third row in the HTML.
Where does this behavior come from?
Table cells will expand to the content unless they have a fixed width. In your example you have table inside tables. Tables tend to have default values such as padding and cell spacing.
To get around this you can use a reset style sheet and modify the CSS of the table and its cells to your choosing
You may need to also perform CSS declarations such as collapsing borders if you really want it to be pixel perfect.
actually columns expands and oontract on the base of contents inside the header or cells
DEMO:http://jsfiddle.net/aPPAL/1/
see the results.
I have a table with 4 columns. The first 3 columns should only take up the space they need to display the data / ui control that is placed in them, whereas the fourth column should take up the remaining space. I don't know while creating the table what widths the first three columns should be, so I can't put a "width" value in there.
If I set the fourth column to 100% width, then it squishes the first three columns too much; if there is a drop down list ("select" in html terms) in one of those columns, the last column would then force it to become somewhere around 20 pixels wide, whereas it should be as wide as the option element which has the longest text in that menu.
Other rows in the table will cells that span multiple columns, so I think I'm stuck using the table element (as opposed to divs etc)
Any ideas? IE6 is not supported by the site so whatever works in Firefox / Chrome should be good.
Try putting width:1%; white-space:nowrap; in the first three columns and leave the fourth without width