I'm trying to solve this problem using the Foundation's (for sites, 6.3.0 version) classes.
I have to show a table with a lot of data (and columns), and I want 2 of them to have a minimal width, so that the content (which have fixed length) does not wrap.
I tried setting the min-width of the td and th elements, without luck.
If there is no way to do with Foundation, I will simply code my own CSS table :)
Solved by using a little CSS trick, maybe it's widely know, but for those like me I'll explain:
I've simply added a class for the td like this:
td.min {
width: 1%;
white-space: nowrap;
}
This will set the td width to fit the content, without wrapping it.
Related
Im making a page with bootstrap 2 due to job requirements and facing the following challenge, please understand Im learning it ;)
I have one #mainDiv below a div with my namespace for bootstrap .bootstrapDiv
Below that I have one .row-fluid, under them 2 .span12, here is my problem;
I need to be able to put together with margin-right:0 first one and margin-left:0 second one, these two divs should fill the row respecting the general layout of the rest of rows.
How I see them is ok in the left but at right is missing this gutter width and doesnt looks nice at all, is there any special class that expands the row and its contents horizontally if you take out the iner horizontal margins of the elements in it?
How should you solve this problem normally?
EDIT
Here is my fiddle:
http://jsfiddle.net/qdb74/
im refering to the black space
I usually solve problems like this by creating my own CSS or extending Bootstrap. That is because Bootstrap doesn't have an option to modify the gutter for .row-fluid. Here is an example on how to extend Bootstrap:
.row-fluid [class*="span"].no-gutter {
margin: 0;
}
.row-fluid .span6.no-gutter {
width: 50%;
}
.row-fluid .span5.no-gutter {
width: 41.666666666666666%
}
...
And you can decorate your element like this:
<div class="firstDiv span6 no-gutter"></div>
However if you decide to extend Bootstrap and a new version of the framework comes out this might break. If that is a concern it might be better to create your own fluid grid without gutters. That option will require you to write a bit more CSS than this.
I have a %-based grid with a fixed-width (for the moment). The code is based off of this css-tricks article: http://css-tricks.com/dont-overthink-it-grids/
Works great until I have a column that has multiple responsive images in it that are the same size and need to be stacked next to each other (floated). Because of padding issues and what-not, I can not get all three images to come out the same width and height, despite the fact that they start that way. The last one is always taller. Here is a codepen showing the issue: http://codepen.io/joshmath/pen/dEuIv
Any help with this would be really appreciated. I've run into this issue before and always just end up hacking my way through it on a case-by-case basis. Thanks!
For whatever reason, if you remove the padding-right: 0 style from the last element, it fixes the issue.
It looks like you're trying to add spacing between the elements using padding. What I tried instead using the Chrome dev tools was to use a margin instead of padding, and then slightly reducing the width of your elements to around 29.5%. That seemed to work.
just add the following to your css. set the size to whatever you like and all images within your grid will remain that size, if they need to grow / shrink use height/width percents instead.
.grid img
{
width: 350px;
height: 400px;
}
I know the chances are slim, but how would you achieve layouts like the following, where left, center and right have different background colors while using the bootstrap grid system? I guess the column layout is against the thinking of the Bootstrap grid, am I right?
Here's an online use case url.
The CSS is the standard Bootstrap grid CSS for spans etc..
I had a look on some other SO Q and A's but I wouldn't like to use things like JavaScript.. or things not supported by IE7+..
The solution from #Omega looks good, here's another option: http://jsfiddle.net/panchroma/u5XGL/
The important bit of the CSS here is how to get the background colours for columns with varying content height.
I've added a large padding and an equally large negative margin to each column, then wrapped the entire row in in a class with overflow hidden.
CSS
.col{
margin-bottom: -99999px;
padding-bottom: 99999px;
background-color:#ffc;
}
.col-wrap{
overflow: hidden;
}
You will find that it resoponds well and is also a good cross-browser solution.
Good luck!
Sure, just use this CSS:
html, body, .container-fluid, .row-fluid, .blue, .lightgrey {height:100%;}
http://dabblet.com/gist/5326320
I'm using this free html template to create a page that displays some information about a web application. Please see this JsFiddle for reference: http://jsfiddle.net/wx3Gz/1/
The problem are the tables in the three columns in the main content.
I'd like to set the tables to the same width as the column (274px) each, and the content should be automatically arranged within.
For the first table I'd like to have the 2nd column to be as wide as the content requires, the first column then should take up the rest of the available width and overflow with ellipsis.
Anything I already tried (setting display: block on the table, using tabley-layout: fixed) resulted in either a table with all the columns having the same (wrong) width or in the most cases in content overflowing the column.
The perfect solution would format all tables in the three group-elements to a max width and allow to set a css class on the columns (the th elements, that is) that should show ellipsis where the column gets to wide). An almost perfect solution would require that css class on every cell.
I need this to work in Firefox and IE7/8. Ideally also IE9 and Chrome.
Try setting a max-width on the table cells rather than on the table directly:
td {
max-width: 200px;
}
td div, td {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
Here's a modified version of your code. I'm not on Windows, so I can't check in IE.
I like to get my table behave like a block element. I cannot set it to width:100% because it does have some padding, this is going to result 100% + the paddings PX.
Check out: http://jsfiddle.net/LScqQ
Finally the table does what I want, can you see the box-shadow? But the table children don't like it that way^^
I guess the TH inside the THEAD are the problem.
They do not get the aspected ratio of 66% to 33%.
Help wanted...
Your table should be display: table. If you're worried about the sizing, use box-sizing: content-box.
The reason is that display: table creates the table layout mechanism the rows and columns need to be laid out; in certain conditions if the required elements aren't there, they will be implicitly created, but it can cause problems. (You can test that out by making a table layout with divs and setting them to display: table, table-row, table-cell, which are the default user agent styles for table, tr, and td elements. If you play around with unsetting the styles on the divs in different combinations, you'll see that sometimes the browser implicitly makes the table layout incorrectly.)
So, always leave the display: table-* styles intact if you want an actual table layout. Sort out your width issues using the appropriate styles for that. If you describe better what you want, maybe you can get a better answer.
Finally I found the answer by myself.
Put your table inside a wrapper container and write a CSS rule similar to this:
//HTML
<div class="wrapper-table">
<table>...</table>
</div>
//CSS
.wrapper-table > table
{
width: 100%;
}
Now the table will no longer overflow your layout and fits perfectly like most elements do.