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.
Related
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'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 have a table that I'm styling with CSS. Yes I know, tables are bad and all that. I want the "grid" of TD's to all have the height of the row they are positioned in.
http://jsfiddle.net/p87Bv/1/
You'll see if they have varying content, they look all jumbled up! Would prefer not to use Javascript.
tables are not automatically bad. tables are perfect for displaying tabular data... even though that doesn't seem to be what you are doing.
move the style from the div to the table cell...check out my updated fiddle for some CSS changes. i think you could remove the divs from the markup now that they aren't being used for anything via CSS
http://jsfiddle.net/p87Bv/5/
All you have to do is give you tds a height, and then give the divs inside a height: 100%.
Here's the fiddle: http://jsfiddle.net/p87Bv/2/
It's hard to understand your question. Maybe you can clarify - is this what you're looking for? Also notice how the overflowing text is in a scrollable div - more on that later.
Link: http://jsfiddle.net/ZFHUm/
If it is, it's as simple as adding the height CSS property. Also, it's always good to address the text overflow, especially in this manner, in case the text inside the table row (div) is larger than the div itself. Add these to the 'table td div' property to achieve the affect in the new fiddle:
height:200px;
/* or whatever height you'd like them to be */
overflow:auto;
/* makes all overflowing text have a scrollbar */
I have this table1 inside of a span tag (span is inside of td tag)
the problem is that the row data of the Table1 is appearing outside of td ...the data should appear within the boundaries of td tag..right ? coz the span is contained within the td tag...how do I make sure that the width of span remains fixed..like it shouldn't display stuff outside of td tag which is its container
Firebug shows table1's width as 100%
[Edit]
ok I added display:block; in span tag first..didnt work...when I added the same in Table tag the columns of the Table shrank..ie spaces between col.s shrank and row data isn't anymore displaying outside of td's area
Now what I wanna ask is that if I set Table{display:block;} in the css file..how would it affect other tables ??I don't want other tables to get screwed up...Just want this one fixed..Also, the table is being created on runtime using Telerik's RadEditor so will display:block fix table's width and not let its rows' data flow outside td area??
<span>s are inline elements, like <a> and <img>, therefore they cannot accept rules like width:, height: and others.
To allow the <span> to accept these rules, add display: block; to the Span's CSS.
This will allow it to accept the width rule and fill up your TD.
That or just change your <span> to a <div>.
If that doesn't work, post your code and we'll take a closer look :)
A span is an inline element and so cannot have an explicit width set. What is in the span? If it's a continuous string then there is no way for the browser to know where to cut the string and make it wrap. If you don't want to see the excess content then you can set overflow:hidden on the element but that's not always a good idea. Perhaps post the code you are working with and we can provide more specific help.