For an Angular application I try to add an animation to add and remove a table row to/from a table. For this, I want to expand and collapse a single table row.
I need to have an initial and final css state. For the initial state I want to set the height of the table row to 0px but even when I try to add the following styling, the table row is still not set to 0px;
tr, tr * {
height: 0px !important;
overflow: hidden;
line-height: 0px !important;
}
How can I totally collapse a single table-row DOM element?
EDIT: It is not the actual situation, but this fiddle might be a good comparable situation; http://jsfiddle.net/mLk5w26n/
Related
I need to hide row in html table. But I can't use property display: none.
Reason - we use tablesorter plugin with widgets staticRow and scroller and when we hide rows with display: none we have troubles with incorrect width in header and in table cells.
We discovered that problem is in display: none. We tried to use set from several properties for hiding rows
tr.hide, tr.hide td {
visibility: hidden;
height: 0;
line-height: 0;
font-size: 0;
padding 0;
}
But this row still have height (not so big as in other cells in table, but still have).
I added 2 examples to jsfiddle (first - with class, which I add above, second - with display:none), you can see difference.
UPD: I added
box-sizing: border-box;
And allmost solved my problem, but still exists 1-2 pixels instead of empty row.
UPD2: border-spacing: 0 for table remove this extra spacing
I am not sure if that's what you want, but you can add the attribute cellspacing="0" for the table. With css you can use.
#second_table { border-spacing:0;}
After a couple of days spent struggling with HTML tables, my forehead has a grid of indents which incidentally are a mirror copy of my keyboard.
Speaking of grids, I'd like to know if there's any set of rules regarding <td> size.
Is it all according to the content? Is it affected by other cells in the same row? By the row itself? By the table? Plain ol' CSS?
NOTE: I'm specifically not looking for an answer to a specific question.
I just want to know how the darned height is calculated so I can figure out myself each time what to expect.
Yes table cells follows the content and it's siblings height.
You can say that it's a rectangle split in section, that no matter what it's inside it will always stay as a rectangle.
So even if you add a css height it will ignore it if the text is bigger than the css height.
So pretty much you can expect a dynamic height in most case scenarios.
But still...it should be used to show only tabular data and nothing else. For the rest there is display:table-cell;...
Here is a FIDDLE that you can play with.
Row styling doesn't work in this setting.
first td row: standard
second td row: given a height - note it affects the entire row
third td row: given padding, again affects entire row
fourth td row: given a large font
fifth td row: given large font and padding
CSS
table td {
border: 1px solid black;
}
table tr:nth-child(2) td {
height: 50px;
}
table tr:nth-child(3) td:first-child {
padding: 10px;
}
table tr:nth-child(4) td:first-child{
font-size: 34px;
}
table tr:nth-child(5) td:first-child{
font-size: 34px;
padding: 10px;
}
PS - Use tables only for "TABULAR" data.
I am trying to remove the space between the different tables but not able to do so.
If I were you I would seperate your css out into another file. Inline css can be very hard to find sometime.
To get all the tables next to each other, you need to change all of the inline css on .row elements to the following:
<div class="row" style="margin-left: 40px; margin-right: 20px; padding: 0 10px;">
I would also probably add margin-top: 10px depending on how much vertical space you want between each table.
Specifying margin-top, margin-left, and margin-right is the same as margin: top, right, 0, left if you want a shortcut.
Each table element seems to have the class time so you can just apply a negative margin to that class. Something like this should work:
.time {
margin-bottom: -30px;
}
http://jsfiddle.net/nJa45/4/
Now, that being said, if you are trying to eliminate the spacing all together, you might have better luck restructuring your table. Rather than having multiple tables, make the entire thing one nested table. This will provide a more consistent removal of white space.
I have a strange problem that I'm actually ashamed to admit. See the whole thing here:
http://jsfiddle.net/Sorcy/ng2by/1/
My problem is: the second (very small) table should actually stretch the whole width of the container. When I look at it with firebug it does (therefore the blue box to the right, which is actually the background color of the table), but the rows themselves only stretch as far as they have to to accommodate the content.
Since I don't want a big blue box beside my tables, how do I get this thing to stretch the whole width? No amount of setting width for tablerows has brought me anything, and since I can not know beforehand how many columns my table is gonna have, setting a width for the cells is also out of the question.
Only solution I have so far is writing a small Javascript that goes through the tables, counts the columns and sets the width of each on the fly, but of course I'd like a pure CSS solution much better.
Edit:
As requested, an image of how it is supposed to look:
Direct link for bigger image
I believe the main problem is this:
table {
display: block;
}
If you change the display property for tables, you are basically asking the browser to ignore it's a table and handle it as a regular element, thus leading to unpredictable quirks.
I don't know what you were trying to accomplish but it's possible that you really wanted this:
table {
border-collapse: collapse;
}
This attribute makes it easier to accomplish certain visual designs.
Update #1: A dark line after the last row of the table can be done with this simple style:
table {
/*background-color: #001F66;*/
border-bottom: 1px solid #001F66;
}
Update #2: To get a dark line after the cells of the last row replace this:
table tr:last-child td { border-bottom: none; }
... with this:
table tr:last-child td { border-bottom: 1px solid #001F66; }
sir when i insert a long string data the table size comes out of the page as show below.
http://lh3.ggpht.com/_Um0yFxPtzJ8/S0G8dGp1EcI/AAAAAAAAACc/JOJGrM0U-dI/s800/untitled.JPG http://lh3.ggpht.com/_Um0yFxPtzJ8/S0G8dGp1EcI/AAAAAAAAACc/JOJGrM0U-dI/s800/untitled.JPG
should i userd table-layout:fixed;word-wrap:break-word;
as:
table { border-width:1 px; background-color: #ffffff; border-right-color: #828DAF; border-bottom-color: #828DAF; border-top-color:#828DAF; border-left-color: #828DAF; table-layout:fixed; word-wrap:break-word; }
but its nt working???
try this css
table-layout:fixed;word-wrap:break-word;
My suggestion would be to reduce your font size or add a div around your table and add overflow: auto; to it ... so an horizontal scroll bar appears when you have too much content in your table.
As Tommy said, you want to use "table-layout: fixed" in the CSS for your table.
Then you have at least three choices for what to do with table cells that have too much content:
Do nothing - they'll keep going outside their cell.
word-wrap:break-word will break in the middle of a word
overflow:hidden (on the TD, not the TABLE) will cause the rest of the text to be hidden; the user can expose more by making the window wider or decreasing the font size.