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;}
Related
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/
i have a huge table (about 2000 rows with 60 cols) and on each cell is a title.
The title on empty cells is about 40 Bytes Long.
So the created webpage is huge. I wand to decrease the size of the webpage.
As I can's set a title in a class, I tried to solve it with pseudo elements.
See my fiddle here
"info" is my tooltip/"title" Attribute
first table:
<td><span info>Content</span></td>
second table:
<td info>Content</td>
In the second table is a gap between the cells. Why?
You set [info] to display: inline-block;. It's fine for spans but when you put info attribute on TD, this of course messes up table layout, because TD must have display: table-cell.
Move inline-block to span[info] only if you want it to be there:
[info] {
position: relative;
cursor: help;
padding: 4px;
}
span[info] {
display: inline-block;
}
Demo: http://jsfiddle.net/gL30qujr/3/
I have a year calendar that shows just the way I want on normal browsers, but in responsive browser I want it to show all the months below each other, due to layout problems.
I know how to apply code to responsive browser - this is not what I am asking about.
I tried giving the td's the value of display:table-row, and its giving me almost the desired result .. it keeps pushing the rows to left and wont accept width:100% value, that's the problem.
Here is a link to the website I am working with www.5eren.dk
you need to set display:table on <tr> and set display:table-row on <td>. use this CSS:
.year-view>table>tbody>tr {
display: table;
width: 100%;
}
.year-view>table>tbody>tr>td {
display: table-row;
}
I have an issue related to vertical whitespace in a table. I'm using the border-spacing CSS property to add some space between the table rows (to make them appear less-crammed).
Data is added dynamically in the table, so there can be the situation in which I have no data in the table (no trs) but there is some vertical whitespace due to the border-spacing property (which is currently border-spacing: 0px 10px).
Is there a possibility to fix this through CSS?
Fiddle example with data: http://jsfiddle.net/lav911/QLsah/
Fiddle example without data: http://jsfiddle.net/lav911/yWRS7/
I mention that the intended functionality would be not to display the table at all when there is no data in it.
Edit: Testing on Chrome.
You can use CSS :empty pseudo, and than use display: none;
table tbody:empty {
display: none; /* Than get rid of it */
}
Demo (No display: block; required there)
Still a small black dot remains, it is because of the border of your table element, since there's no way as of now to select the parent element using CSS, you cannot eliminate that without using jQuery, by selecting the parent element and applying border: 0;
like this
DEMO
table {
border-collapse:collapse;
}
CSS is not capable of knowing if selectors have content. Since you're adding it dynamically though, if there is no data present add a class to the table. something like:
<table class="empty"></table>
then, in your CSS, add:
table.empty {
display:none;
}
since you're using a framework that may or may not be editable, you can add this JS (using jQuery):
$(document).ready(function() {
if ($('table tr').length == 0) {
$('table').addClass('empty');
}
});
I don't know why this bothers me so much, but when I create websites, I always try to do all my styling with CSS. However one thing I always have to remember to do when I'm working with tables is add cellspacing="0" and cellpadding="0"
Why is there not a CSS property to override these antiquated HTML 4 attributes?
Cellspacing :
table { border-collapse: collapse; }
As for cellpadding, you can do
table tr td, table tr th { padding: 0; }
mat already answered, but just for completeness:
padding → cellpadding
border-spacing → cellspacing
border-collapse → no HTML equivalent
It's also worth remembering that you can set separate horizontal and vertical values for the CSS ones e.g. border-spacing: 0 1px.
Eric Myer's reset stylesheet contains the following 'reset' style for table :
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
In addition TD, TR are reset :
thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
The reason I mention this is that he has a comment 'tables still need cellpadding=0'. I assume he put this in here for a reason - probably needed by some old browsers. Judging by the fact that this is one of the very few comments he included I'm guessing its important and that there's a good reason for it.
Based on this comment - and this comment alone! - i'm continuing to use cellspacing="0" in the markup unless someone tells me definitively (below) why I dont need to. It could however likely be unnecessary in any modern browser worth supporting these days.
table { border-collapse:collapse; }
I guess somebody considered cell spacing a “bad practice”. How I understand it is equivalent included in CSS2 standard but IE does not support this property. border-collapse allows to set spacing to 0 value. Cell padding may be achieved setting padding property to TD elements of a table.
It's still a shame that cells cannot inherit their default padding from a CSS property of the row (tr), otherwise from rowgroup (thead/tbdy/tfoot) if it's not "initial", colgroup if it's not "initial", or the whole table.
"cellspacing" dos not have this problem (but in fact they are margins around cells, and these outer margins collapse with margins of the neighouring cells, and with the inner paddings of the table/rowgroup or row, where they are filled by the table's "background" setting (the table background also includes the table's "border" which is drawn on top of it and that also clips this background on the outer edge of the table's border, notably when this border has rounded corners).
But for the cellpadding, It would be jut simpler to defined "cell-padding: n" as a table or group property rather than on each cell separately and explicitly with its own "border: n" style (which should only be used if we need to override the padding in some specific cells).