here is the code i'm having a problem with:
http://jsfiddle.net/crptS/
Basically I have a table, and the width of the table is 100%
table
{
border: 1px solid #ffda95;
border-collapse: collapse;
width: 100%;
}
now I have 1 column which contains 3 icons and I dont want this column to scale with the page. it should have a width of 25px. the td has the class tdmaxwidth60
.tdmaxwidth60
{
width: 25px;
min-width: 25px;
max-width: 25px;
}
however. in Firefox and IE this column still scales with the page, be it slightly different than in jsFiddle. it looks like the width is working (on load width is correct) and the min-width too works, when you have the page fullscreen and you make it smaller it stays the same width. however when you load the page on a small page and then make it fullscreen the width of the column does stretch.
any ideas how to fix this?
In the jsfiddle you posted 4 columns have fixed widths. Therefor they all scales to suit that width of the table.
If you only set the width of the first column then the other columns will scale to fit. And the first column will stay the same.
When you're saying you've got a column you do not want to scale, shouldn't you give your trmaxwidth60 class to every td within that column instead of the tr? Please correct me if I'm wrong.
you can use white-space: nowrap; for the .trmaxwidth60. Of course the default use is for text, but I think will do the job for the icons also.
Related
I'm trying to create a table that has a width of 100% of the parent container, and the td's each are sized automatically on screen size, which is all working fine.
Only the max-width property is ignored on the td. It is scaling to more than 150px. The min-width is working fine.
What am I doing wrong?
I have the following css:
table {
table-layout: fixed;
width: 100%;
}
td {
min-width: 60px;
max-width: 150px;
height: 40px;
}
Edit:
Working example: https://jsfiddle.net/7ez2hmy6/1/
We need an example to answer the right way :)
My guess : if the cell content is larger than 100px (whith a white-space: nowrap, for example), the navigator will still keep the width of the content.
Perhaps adding a overflow-x: scroll would resolve, but it would add a scrollbar when the length will be greater
https://developer.mozilla.org/fr/docs/Web/CSS/overflow-x
EDIT
With your example, I see one drawback: you ask the table to take 100% of width, but you have cells that should only take some width in it. So, the navigator has to take a choice between: must I take 100%, or just the sum of cells max-width?
The best I can do is to fix the width of the cells, and let a last one take the remaining space. Like this: https://jsfiddle.net/1rz8bksp/
each cell would take between 75 and 150px, as asked,
the remaining one will take... the remaining space.
Not very satisfying, but I don't see how to do elsewhere...
I have a layout as shown in this fiddle: https://jsfiddle.net/4dbgnqha/4/. For reasons that you can read about in this post, I don't want to change the way the page is laid out.
Now, it works fairly well, but the issue is that when I add a border to the bottom of the .item divs, I realize that they don't span the full width of the page. As you can see in the above fiddle, the second .item down doesn't have enough content to fill the width, so its border doesn't reach the full width.
I thought I could fix this by just adding .item { width: 100%; }, but when I do that, the image gets added enough additional width to center the p, which looks really weird. Demo of that: https://jsfiddle.net/4dbgnqha/7/
I know it will fix if I add a set width to the image, but as I mentioned in my original post, I want it to be really flexible, able to have many image widths. I also know that if I wrap the image in an element and set that element to a really small width, like 1px, it will work, but that seems like a hack, and the reason I'm doing this stupid table layout in the first place is that I'm trying to avoid any such hacks.
How can I fix this issue?
You can add this into the CSS, it's a hack, but works very well with table layout.
.item p {
width: 100%;
}
https://jsfiddle.net/4dbgnqha/8/
you need to add width 100% to the .item p element so it gets the maximum available width, otherwise that element will get width:auto. So just add width:100% like this:
.item p {
margin: 0px;
display: table-cell;
vertical-align: top;
width: 100%;
}
edit: well, now I see it was already answered, but for anyone looking for info, this is why it happens
I've faced a problem with bootstrap table. Basically, my table will be dynamic and at first some columns will be hidden. Some/All hidden column will be showed dynamically based on user's action. When, many/all columns are shown, a scroll-bar will come at the bottom of my browser window. But, I want that scroll-bar come to my table instead of page/browser window. I mean, this is happened now which I don't want:
I want bootstrap .table-responsive feature for my larger screen too when my table's width cross the visible width of the browser:
Also I want vertical scroll-bar when it'll cross a definite height. To make this, I've applied a css like this:
.table-custom {
max-height: 150px;
overflow: auto;
}
which is not working. And for horizontal scroll-bar(when table's width cross the parent's width), I can't apply any fixed width as I've to concern about all large and small screen. So, what can I do to appear scroll-bars(both vertical and horizontal) when the dynamic table cross the width and height of it's parent div?
My fiddle
I think you simply need to apply overflow: scroll; to a containing element of your table, which you already have with .table-responsive.
.table-responsive {
max-width: 150px;
overflow: scroll;
}
fiddle: http://jsfiddle.net/vwrva9L6/11/
I've read the questions about how it's basically impossible to have a fixed column height, fixed column width AND a fixed column gap (1, 2).
For example, in this JSFiddle, you can see the gaps changing when you change the width of the Result window.
However, I seem to have accomplished a fixed column height/width/gap by setting the 'display' CSS property of the column container to be 'inline-block':
#column {
column-width: 360px;
column-gap: 100px;
-webkit-column-width: 360px;
-webkit-column-gap: 100px;
white-space: normal;
display: inline-block;
margin-bottom: 30px;
height: 600px;
}
updated JSFiddle - gaps no longer change when changing window size, but now there's a huge vertical scrollbar! My hunch is this vertical space represents the space that the images would take up if they were in one giant column, because removing images actually shortens the amount of vertical space (lengths scrollbar).
Why does setting 'display' to 'inline-block' alter the column gap behavior?
Why does the inline-block property introduce so much vertical space?
I'm only seeing the extra long scrollbar in Chrome, and not in IE11.
The simple answer would be: you are changing the display property of a block element to behave like an inline-block, so the behavior is going to change with it. You can check out this answer for the behaviors of each display property.
The huge vertical bar is being created because the #column container height is trying to accommodate the elements within it, regardless of how those element are actually being displayed. Putting a float: left; for the #container div will fix this problem.
I try to adjust table column width ('Author' column on the next link http://deploy.jtalks.org/jcommune/branches/1?lang=en).
I have added the min/max attributes to .author-col style:
#topics-table .author-col a {
font-size: 11px;
min-width: 140px;
max-width: 140px;}
However, target column still has 418 px width. I don't see any other overriding width styles. Could you help me to solve this issue and thank you for any advices.
min- and max-width aren't specified for tables. quotig the w3c:
In CSS 2.1, the effect of 'min-width' and 'max-width' on tables, inline tables, table cells, table columns, and column groups is undefined.
if you want to achive a fixed width for your colums, you might want to try using table-layout: fixed; on your table - but please note that this will fix all other columns to their given width, too.
EDIT:
taking a look at your example again, it seems to be much more simple in your case: you havn't given a width to your table cells but the a contained in them. change your css to this:
#topics-table .author-col a {
font-size: 11px;
/* widths are useless here, because an <a> is an inline-element */
}
#topics-table .author-col {
/* give your .author-col a width instead */
width: 140px;
}