I have a complex table layout (jsfiddle). This is a long report with many sections and each section has a table in it.
The first two columns of the tables should have a fixed width to make sure they align nicely.
The third column should grow to fit the text inside of it without wrapping (it's always a single word).
The last column should always fill the remaining space.
When I just specify the widths of the first two columns and give the last column 100% width, then the last column fills the available space (good) but the widths of the first two columns are ignored.
When I give the table table-layout: fixed;, then the width of the first two columns works but the last two columns occupy the same screen space since I can't give the third column a fixed width.
Is there a solution for this?
Note: The solution doesn't need to work on IE! FF 12+ and Chome 21+ is enough.
Specify a general table with (e.g. '100%'). Then you only need to specify the widths of the first two columns. Therefore the two others behave like desired.
Here is the fixed fiddle.
In a nutshell:
Remove td.type { width: 100%; }
Add width:0.1em; to td.name
Related
I want to utilize CSS3 Columns around my site as it on wide pages provides a better UX for the users. However if I use CSS3 Columns, sometimes the left column is full (lets say 20 lines of text) and the right side only have2 lines of text. Can I with pure css3 (maybe Flexbox) make it have equal amount of content? Or do I need JS to fix this?
Beaware I'm not talking about equal height, but equal amount of content :)
You'll need to specify a height property.
From the Mozilla docs:
The CSS3 Column specification requires that the column heights must be
balanced: that is, the browser automatically sets the maximum column
height so that the heights of the content in each column are
approximately equal.
However, in some situations it is also useful to set the maximum
height of the columns explicitly, and then lay out content starting at
the first column and creating as many columns as necessary, possibly
overflowing to the right. Therefore, if the height is constrained, by
setting the CSS height or max-height properties on a multi-column
block, each column is allowed to grow to that height and no further
before adding new column. This mode is also much more efficient for
layout.
Sorry it was a padding-bottom which messed it up. When I remove that it spreads out nicely. Strange!
I'm trying to build a three-column page with a fixed-fluid-fluid layout and equal column heights.
I found this:
http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-32-fluid-fluid-fixed/
it got me most of the way, but the columns aren't equal height.
I've also tried using CSS tables and it works except when scaling, the columns overlap.
Any ideas?
Edit: I was able to make this work just fine using CSS tables. I preferred that method for making the columns equal height anyway. The overlapping columns, it turns out, was a result of some floated content in my fixed left column. When I removed the float, the page scaled fine.
Does bootstrap have a way to specify justified columns, in the same way that I could do with tables? In other words, I know I want six columns across, but using span2 will give me six equal columns. But this will look inconsistent because some of my columns have less text than others, and I want them equally spaced.
If I resorted to tables and didn't specify column widths, it would distribute each column width proportionately, giving me the exact effect I'm looking for.
Any ideas?
No, you can not. Not unless you want to tweak the grid yourself. Having a span2 column that has less width than other span2 columns breaks the layout and defeats the point.
One possibility is to create an inner div inside the column and give it either padding or margins to make its content area smaller.
Otherwise, just roll your own grid and use that instead. It's fairly easy.
How to format a table using CSS such that:
the table is within the screen that the browser's horizontal scroll bar doesn't show up and users don't need to scroll horizontally to see the right side of the table;
the cells use as much width as necessary, that a column containing cells that only has numbers such as "1", "21" will not use a width that's much wider than necessary to show all the numbers in all cells in that column, say 4 character width, i.e. using much more than it means wasting horizontal space;
for columns containing very wide cells, or more precisely, content that will occupy large width if allowed, use as much width as possible such that 1) and 2) are not violated, and if the whole content of the cell can't be displayed, let horizontal scroll bar show up for that cell.
Is this doable in CSS for latest Firefox and Google chrome on Windows and Mac OS X?
My first attempt was based on CSS: Constrain a table with long cell contents to page width?, using nested divs with position: relative then position: absolute. The size of the absolutely positioned div isn't taken into account, which is good for the table's width but bad for the row's height: it doesn't expand to include the scrollbar.
Then I tried table-layout: fixed as suggested in How can I set a <td> width to visually truncate its displayed contents?. That also accomplishes the goal of ignoring the size of the cell's content, but in doing so makes it so that we can't specify, as before, that the last column should take all leftover width.
See also: Why does overflow:hidden not work in a <td>?.
These tips may help:
1- Do not specify any width for your cells
2- When you insert a page automatically there is a Style created and assigned to it which says:
width: 100%;
go ahead and delete it. that way your table will become very small and adapt itself to the content of the cell.
3- Use nowrap property of the cells for the fields that you want to stay in one line like numbers, but do not set it for larger texts and allow it to be multi-line.
4- You may want to set a width for your table or put the table in a panel and set a width for the panel.
I am not sure how to show the scroll bar for just one row, but I think if you show them in multi lines you don't need that option.
I have two <div>s on my page. I want to arrange them side-by side, so that the first (right) shrinks to fit it's contents (unknown width), and the second (left) expands to fill the remaining horizontal width.
The two columns do not need to be equal in height.
Additionally, I would like to create a 5px gap between the edges of the two boxes.
Is this layout possible without using a table?
EDIT:
Here's a table version to show you the kind of behavior I'm looking for.
I think one of my answers on another question solves this:
xHTML/CSS: How to make inner div get 100% width minus another div width
Am I understanding your question correctly?
Yes it is! You can float the first column left, and play with margins to create your gap.
http://innonesen.se/test/l-41-mod/
Ths should do it ( tested only on IE6 and Opera ).
Additional feature exist that the main container will stop expanding ,
when sidebar is less then 100px wide .
http://innonesen.se/test/l-41-mod/no-right.html
P.S. sorry , i cant past URLs .. my rep is too low.
Sure, here are two different fiddles showing how you could do it. The #float example uses a float: left and then a margin-left on the other div that equals the #float width.
The #absolute one uses one absolute column of fixed width and then the other column sets a margin-left that equals the #absolute column's width.