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...
Related
I have a full screen web app. I'm using CSS 100% height on HTML, body and parent elements. I have a contents table which grows as items are added to it. I am trying to have a vertical scrollbar automatically appear when there is not enough space.
I have tried using different combinations of overflow-y:auto; overflow:auto; on the tbody, table and the surrounding div (which is also 100% height) but nothing seems to work. Is it even possible with 100% heights? Does overflow require a fixed height?
Edit
Here is some code. The left hand column contains the table to which I'd like to add a vertical scrollbar when there's not enough space.
https://jsfiddle.net/468cpvmv/
Unfortunately, you're using a table in a faux-table which makes it much harder to do this right.
You're setting the fieldset > div to it's inherited height which is the height of the table inside.
If you instead base it off the viewport height, you can get your desired result, specifically using calc. Currently you have 45px of "extra stuff" (padding, headers, etc.) that you want to remove from the calculation, so you can add this declaration:
.page-contents .left-col fieldset > div {
max-height: calc( 100vh - 45px );
overflow-x: auto;
}
Here's a fiddle: https://jsfiddle.net/468cpvmv/9/
These are the heights you want to subtract in your calculation:
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 currently have two columns, with another column in-between them. What I want is to have the left and right columns extend in height as the centre column has more content added to it.
Something to note is that I cannot set an exact height for the parent div and then have the left and right columns set to "height: 100%". This is because there could be only a small amount of content in the centre column, or a lot.
It looks like you're going to have to implement a Javascript approach. The way I would go about it would be to grab the height of .legs then apply it to .flight_no and .price.
The only other option I can think of would be to "fake it" by giving .flight a background image that would include however your left and right columns are stylistically different, then repeat-y in your CSS. If you do that, the sidebars wouldn't actually have to span the same height.
Something like this, using jQuery, will dynamically set your sidebars to the height of the middle column.
$(document).ready(function() {
$(".flight_no, .price").css("height", $(".legs").height());
});
Edit:
Times have changed -- jQuery is not the juggernaut it once was, and we welcomed Flexbox to the world. See this SO page for column-based solutions:
CSS - Equal Height Columns?
Extending div to correct height, or lets say 100% height of the container, You have to chain height:100% up to the container with fixed height or to the body with another height: 100%;. On the long run, you will probably require this solution.
Since there is no fixed height, I used height: 100% and chained up to the body an html.
body, html { height: 100%; }
.flight
{
float: right;
border: 1px solid green;
height: 100%;
}
Demo
TO give exact height of container to the sidebars, you either have to use fixed height or use javascript.
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.