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.
Related
:-)
I use 2 features of the PrimeNG table (<p-table>, Version 8) in combination:
Scroll
Row expansion
This works quite well as long as the table is indeed scrollable:
But when to many rows are collapsed the table is smaller than the threashold scrollHeight I configured at the p-table. That makes the scrollbar go away so that the table body fills up that space - without the header getting wider too:
What I tried so far
Force the scrollbar: According to this article giving an html element the css style overflow-y: scroll enforces the scrollbar to allways be visible. However the scrollable element I deal with here is generated by PrimeNG and so far I couldn't overwrite it's style
Use position: sticky to make the header follow: I already blowed hours in applying that attribute to the header. It never took effect. Thats why I tried this with the scrollable function of p-tablein the first place.
May the force be with you!
This workaround works for me with vertical scrollbar always be shown:
body .ui-table-scrollable-body {
overflow-y: scroll;
}
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.
I have a data table that needs to scroll vertically. It seems that if your display value is table, you cannot set a height or max-height, and so overflow-y:scroll does nothing.
(Codepen with table)
.fake-table {
display: table;
max-height: 300px;
overflow-y: scroll;
}
Also, if you remove the display:table from the parent but keep the display:table-row and table-cell, the width of the rows will not be 100%;
I tried instead doing this with flexbox (Codepen with flexbox). But of course, then I don't have nice columns that are left-justified.
.fake-table > * {
display: flex;
justify-content: space-around;
}
Browser support is all modern browsers (IE10 +) including mobile safari and android browser.
It seems that if your display value is table, you cannot set a height or max-height
Effectively, the spec says (max-height):
In CSS 2.1, the effect of 'min-height' and 'max-height' on tables,
inline tables, table cells, table rows, and row groups is undefined.
And you can use the height property, but it will be treated as a minimum height, and thus won't produce overflow (Table height algorithms):
The height of a table is given by the 'height' property for the
'table' or 'inline-table' element. A value of 'auto' means that the
height is the sum of the row heights plus any cell spacing or borders.
Any other value is treated as a minimum height.
Also, if you remove the display:table from the parent but keep the display:table-row and table-cell, the width of the rows will not be 100%
In this case, since there is no tabular container, an anonymous one is generated (Anonymous table objects):
Document languages other than HTML may not contain all the elements in
the CSS 2.1 table model. In these cases, the "missing" elements must
be assumed in order for the table model to work. Any table element
will automatically generate necessary anonymous table objects around
itself
But that anonymous table won't necessarily be as wide as .fake-table.
I tried instead doing this with flexbox
Flexbox is a bad choice because it has no grid notion.
Maybe CSS Grid would be better, but it's currently experimental and only IE10 supports it (an older version of the spec, tough).
Basically, you have two options:
Fixed column width approach
If you predefine the width of the columns, the result will be a grid, even if you don't use tabular/grid displays.
Non-tabular to wrapper
You can wrap your table inside a dummy (non-tabular) element, and set overflow and max-height to that element.
Wrap your .fake-table in a div?
CodePen
Also, it is 100% acceptable to use actual <table>'s for displaying tabular data... actually it's preferred. Its using tables for layout when things get hairy.
This addition worked for me:
table {
width: 100%;
}
.example-container {
height: 400px;
max-width: 100%;
overflow: auto;
}
Just set a container for your table, make it scrollable and fix its size, and limit its width, to prevent horizontal scroll.
I would like to give credit to Hardik Savani, who wrote the solution & explanation here.
I have a table in which each of its TD contains image (more precisely, emoticon) which have same height. Oddly, they are not properly aligned. One emoticon is at the top, the other is at the middle, and the other is at bottom.
Here is a picture to make the explanation easier:
http://i.imgur.com/ITbBp.png
I tried to copy the HTML structure to jsfiddle, but it is properly aligned in there. So I believe this is a CSS problem.
However, my try to modify everything results in no avail. I cannot make it aligned properly. I tried vertical-align:middle and tried to set the padding and margin but I cannot make it align properly.
Is there any help to do this?
EDIT: it turns out that this CSS is the one that is making the problem:
.emotlist {
overflow: auto;
height: 175px;
width: 120px;
}
When I remove the overflow: auto, it displays as I want it to be. But the problem here: I need the overflow:auto to make scrollbar, so in case there are more emoticons added to the table, it will not exceed the defined-height.
EDIT 2: I guess it is not the overflow: auto which is causing the problem, since it is just working fine in the fiddle (as demonstrated by Sheilender)
Disclaimer: I cannot change the HTML structure (in case someone suggest so). I don't have access to the HTML template and what I can do is only style it via CSS.
.
Looks to me like the after each image is being broken to a new line hence the problems.
Try:
.emotlist table tr td {
width: 25px;
}
This should make the cell wide enough to accomodate the image and the
or
.emotlist table tr td {
white-space: nowrap;
}
To prevent the cell from breaking any lines.
see i have made changes according to your requirement with your css
http://jsfiddle.net/uxyjg/14/
you can read more about vertical center content
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.