I have an issue with my CSS solution that I had came up with. I have a list with 3000 rows or so and they each have the following css applied to each row:
.row .title,
.row .description {
position: relative;
overflow:hidden;
white-space: nowrap;
background-color: inherit;
}
.row .title:after,
.row .description:after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 10%;
height: 100%;
background:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,1));
}
Here is a sample row:
<tr class="row"><td class="title">really long test data string</td><td class="description">Test description</td></tr>
Basically what I am trying to do is fade out the text when the window is smaller than the table width. The problem is that I am always having high CPU usage when scrolling through the table, so it's non-responsive almost all the time. I realized it was this snippet of CSS that was causing this, but does anyone know of a way to make this work without causing high CPU usage. Maybe I am approaching this situation wrong? Anyone have any thoughts?
thanks!
Try using .row>.title and .row>.description - the > combinator is more efficient than the [space] combinator, because it only has to travel one level of the hierarchy instead of all of them.
Normally this won't make much difference, but with 3,000 rows it could.
Also, consider adding table-layout: fixed to your table. You may need to add some HTML:
<table style="table-layout:fixed">
<colgroup>
<col style="width: 50px" />
<col style="width: 250px" />
</colgroup>
<tbody>
<tr>...</tr>
...
</tbody>
</table>
This will allow the browser rendering engine to fix the table layout rather than making it dynamic based on the content - this will add up to a massive improvement for your huge table.
change your selectors to something more specific, e.g.:
.rowtitle,
.rowdescription {
position: relative;
overflow:hidden;
white-space: nowrap;
background-color: inherit;
}
or direct descendant if it suits your markup:
.row > .title,
.row > .description {
position: relative;
overflow:hidden;
white-space: nowrap;
background-color: inherit;
}
cascading selectors are more expensive because the browser traverses the DOM right to left when interpreting a css selector.
you can measure your css selectors performance with Chrome dev tools, "Profiles" and use the "Collect CSS Selector Profile".
Related
I know it should not be possible, but maybe there's some new quirk... Take a look:
https://jsfiddle.net/1hnxzyux/4/
So I'm using display:table, table-cell and table-row.
I was previously able to get a row to zero height if it doesn't contain anything or if it contains a display:none element, but on the fiddle you can see I've tried to hide the first row/cell by setting height:0 and overflow:hidden on all the elements, including a .box inside the cell, and it really doesn't work.
Please especially test on Safari, because it has some more problems than Firefox and Chrome.
Any way to get rid of the height and hide contents?
EDIT 1: for now, I've found out that IF using a real html table and adding table-layout:fixed to it along with setting some width for it, as for the official specs (and some other posts here in SO) the overflow property does work.
Though, it seems it doesn't work/apply to, css-tables, and I need css-tables.
EDIT 2: Thanks to #zer00ne I updated the fiddle and found that it --would-- work by setting font-size:0 both to td and input field. Though, it's not what I'm currently looking for, since I have to animate the field position and must be fully functional itself. Anyway, these 2 edits can be helpful for other people.
After about one week of searching for a solution, the answer is:
no, it's still not possible. At least, it's not possible in a reliable and versatile way. It's only possible in ways that somewhat limit elements or future actions.
If one doesn't strictly need css-tables (like me in this specific case), you can successfully mimic the same behaviour in 2 ways:
use real tables, apply table-layout:fixed and a width to the table (doesn't matter the unit, can be percentage, for ex.). Than just height:0/oveflow:hidden as usual.
use flexbox. It's the css construct that, with the right rules applied, can better approximate the table behaviour.
Hope it helps
You shouldn't set height of a row. Just place div tag inside each td and put your content in div but not in td directly. The height of row will be equal to height of its content. Set height and overflow for div element and set 0 in top and bottom padding of td. And of course you can use transition for height of div.
$(function() {
$('button').on('click', toggleColumn);
});
function toggleColumn() {
$('div').toggleClass('rollup');
}
table {
border-collapse: collapse;
}
td {
padding-top: 0;
padding-bottom: 0;
border: 1px solid black;
}
div {
background-color: yellow;
height: 40px;
padding-top: 10px;
padding-bottom: 10px;
overflow: hidden;
transition: 2s all;
}
div.rollup {
height: 0;
padding-top: 0;
padding-bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>toggle</button>
<table>
<tr>
<td><div>Column 1</div></td>
<td><div>Column 2</div></td>
<td><div>Column 3</div></td>
<td><div>Column 4</div></td>
</tr>
</table>
If you are simply out after making the first row "invisible", you should simply be able to use CSS's :first-of-type like such:
/* Hide the first occurance of the 'tr' class */
.tr:first-of-type {
display: none;
}
Other than that, I'm not sure why you wouldn't be able to do something like this, alternatively? (a bit like the method you had attempted):
HTML
<div class="tr hidden">
<div class="td">
My Content
</div>
</div>
CSS
.hidden {
display: none;
}
Last but not least, may I ask why you are creating a "handmade" table using div's, instead of HTML's designated table?
You can animate opening a table row with HTML tables using this css:
tr.info td {
transition: all 0.5s ease;
}
tr.info.hide td {
line-height: 0;
padding-top: 0;
padding-bottom: 0;
overflow: hidden;
opacity: 0;
}
Remove the vertical padding which causes the apparent "minimum height" (thanks Andrey Shaforostov). Set opacity 0 to make the text appear as the row grows - smoother effect than using font-size. No need for inner div's - just add/remove the "hide" class on the table row.
Firstly, I didn't think this styling would be possible in Chrome/Firefox but surprisingly it worked! However it doesn't display the same in Internet Explorer (What's new huh?).
As it worked in Chrome/Firefox/Safari/Opera I thought it might at least work in the latest versions of Internet Explorer but I get the same issue from IE11 down. I've not tested in EDGE yet.
Here's a CodePen showing the mark-up/CSS: http://codepen.io/moy/pen/yewbBx
Basically I have a pretty standard table but a row which is 'selected' is slightly wider than the rest. I achieved this using the :before pseudo class for the first and last <td> of a selected row, a bit like this:
tr.selected td {
background-color: #brown-lightest;
position: relative;
}
tr.selected td:first-child:before,
tr.selected td:last-child:before {
background: #brown-lightest;
content: "";
display: block;
height: 100%;
position: absolute;
left: -5px;
top: 0;
width: 5px;
}
tr.selected td:last-child:before {
left: auto;
right: -5px;
}
Occasionally it 'looks' like it works but it seems like the content of both the first and last <td> both need to be the same height for it to work. Even though td:before {height: 100%;} is set, it seems to take the height of the text rather than the <td>. Which is strange before with it being a table layout all the heights in the row should be the same?
I understand this mightn't be possible in IE but I thought I'd see if anyone had an ideas why this might be happening incase it's something other than the simple fact the browser just can't do it.
Thanks in advance!
Honestly, doing it that way is quite the hassal. I'd recommend checking out Bootstrap CSS, Why? It's designed specifically to combat it.
However if you want to do it like that, just wrap it with a tag
Example
<span style="color: red; background-color: blue; "><td>RandomData</td></span>
These are just options however, someone else might be better than I with the first and second child marks.
So I'm designing an org chart based on the table element and I have a problem. I'm using <hr> elements to create the connectors; however, I can't get the dead space inbetween elements to go away. I've spent the last hour trying to figure out how the hell to get it to work and I just can't seem to figure it out.
I've included a picture to show:
The other issue is more of a question I haven't really looked into but figured I'd ask anyway. How can I lock the height of my table items. I've locked the width just fine but I can't seem to lock the height to 70px.
And here is some choice code:
<table class="orgchart" cellspacing="0" cellpadding="0">
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td class="item">Director</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr class="divider"><td></td><td></td><td></td><td></td><td></td><td></td><td><hr width="1" size="20"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td class="item">Assistant to the Director</td><td></td><td class="item">Deputy Director</td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
And the CSS:
.orgchart td {
width: 70px;
height: 70px;
text-align: center;
overflow: hidden;
white-space: no-wrap;
}
.divider td {
height: 20px;
}
.item {
border: 2px solid black;
}
And here is the CodePen: http://codepen.io/jacob_johnson/pen/GpEjmm?editors=110
There's a margin all the way around the <hr>. Remove the top and bottom margins from the <hr>. All browsers apply default styling to elements, though not always the same. As a result you will see reset and normalize stylesheets used to improve visual consistency and development pains.
Updated Codepen with CSS below added.
hr {
margin: 0 auto;
}
If I was doing this project I would find a simple grid framework to layout with DIVs or more than likely I would create this chart as an inline SVG.
I want use a div that has a background-color, but if I print the page it appears in white .
When I create a table using <tr bgcolor="#333333"> it also does not work.
How I can create a print page using css and html ?
My code :
<table border="0px" cellspacing="1" cellpadding="0" bgcolor="#777777" width="650px">
<tr bgcolor="#999999">
<td align=right colspan=2><span style="font:bold 14px 'b nazanin';">Text</span></td>
</tr>
</table>
CSS: box-shadow: inset 0 0 0 1000px gold;
Works for all browsers and on table cells and rows.
I would look into the media query way of targeting a stylesheet to the print. I don't believe you will find a common way cross-browser of doing what you want to do (control whether the user's printer prints a background) without using PDFs of your content, which may not be desirable/doable. However, you should consider specially handling your print styles and perhaps avoid backgrounds in your design of the printed page.
http://www.w3.org/TR/css3-mediaqueries/
EDIT
Seeing your other comment, if you have to make the backgrounds print and have a single user, teach your user to make the printer print backgrounds. See for example in Firefox (checkbox):
Background colors and images don't print by default.
It is a printer option your users could change, but you absolutely can't count on your users knowing or doing that. You cannot control this from the web side (as far as I know).
In Crome "-webkit-print-color-adjust: exact;" works for me.
Use:
#media print {
.collage_bg {
background-color: #E6E7E9 !important;
-webkit-print-color-adjust: exact;
}
}
Or Check Background Graphics option:
Both options working fine for me.
Here is something worked for me as I was using Fixed size block element. The image used is 1px X 1px but forced to expand to the size of box. This way we are printing image directly instead of background color/image.
<style type="text/css">
.outer {
width: 200px;
height: 80px;
position: relative;
}
.outer .grayBg {
position: absolute;
left: 0;
top: 0;
height: 80px;
width: 100%;
z-index: 1
}
.inner {
width: 100%;
position: relative;
z-index: 10
}
</style>
<div class="outer"><img src="grayBg.png" class="grayBg" />
<div class="inner">Some text</div>
</div>
You could however always use an image for that. Make an image with a width of 1px and repeat it like this:
background: url('path/to/image.png') repeat-x;
Is there anything I can do to make IE display table cells as actual blocks?
Given this style:
table,tbody,tr,td,div {
display: block;
border: 1px solid #0f0;
padding: 4px;
}
And this html:
<table>
<tbody>
<tr>
<td>R1C1</td>
<td>R1C2</td>
<td>R1C3</td>
</tr>
</tbody>
</table>
<div>
<div>
<div>
<div>R1C1</div>
<div>R1C2</div>
<div>R1C3</div>
</div>
</div>
</div>
The table renders exactly the same as the nested divs in both Firefox and Safari/Chrome. But in Internet Explorer (8) the property display: block has no effect. The table renders exactly as if I don't set that property.
My main problem is that the cells don't break; They all render on one line. (The tbody and tr elements don't get any borders nor padding. That is not a problem for me right now, though.)
I haven't found any information on the problem when searching. Compatibility charts on quirksmode and elsewhere states that IE supports display: block since v. 5.5. Any discussion on table display problems seems to be when doing the reverse - giving non-table elements any of the display: table-* properties.
So once again, is there anything I can do to make IE render table cells as block?
(The real table is really a table, with tabular data. I would like to keep it that way, and restyle it unobtrusively.)
I applied float: left to stuff. It kinda works.
Live Demo
The biggest problem is width: 100% combined with the padding is making things too wide.
So:
Live Demo (without the problematic padding)
That looks a bit better, but I'm not sure how you can easily add padding everywhere if you need it.
This fails --> miserably <-- in IE7 (it just won't get over the fact that it's a <table>), and even if you don't care about IE7, it will need tweaking for your use case (if it's usable at all).
IE7:
The following worked for me for IE6+:
tr {
display: block;
position: relative
}
td.col1 {
display: block;
left: 0;
top: 0;
height: 90px;
}
td.col2 {
display: block;
position: absolute;
left: 0;
top: 30px;
}
td.col3 {
display: block;
position: absolute;
left: 0;
top: 60px;
}
Assumptions:
cell height 30px
Drawbacks:
Fixed cell height
Cumbersome specification of top property (maybe generate)
Only works when HTML provides classes for columns
Advantage:
Works in all browsers.
When to use:
When you have no control over HTML, but have control over CSS. Some hosted payment solutions come to mind that display in an IFRAME and offer a custom style sheet.
Just figured it out with a collegue of mine.
ALTHOUGH I STRONGLY RECOMMEND TO NOT SUPPORT IE8 AT ALL ANYMORE!
Since you are facilitating the use of an unsupported and currently unsafe product that is not up to par with current standards and techniques. It would be way better to tell your users to upgrade and give them some browser downloadlinks to choose from.
That being said. The CSS below is the minimum css you need to fix it in Internet Explorer 8.
table {
width: 100%;
}
td {
float: left;
width: 100%;
}
<table>
<tbody>
<tr>
<td>cell-1</td>
<td>cell-2</td>
</tr>
</tbody>
</table>
add this code:
<!DOCTYPE html>
我这里是这么解决的，加上上面那条声明语句，display:block对td就会有效。
you need add this code in the top.
<!DOCTYPE html>
<html>
<head>
<style>
td {
display: block;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>Job Title</td>
</tr>
</thead>
<tbody>
<tr>
<td><div>James</div></td>
<td><div>Matman</div></td>
<td><div>Chief Sandwich Eater</div></td>
</tr>
<tr>
<td><div>The</div></td>
<td><div>Tick</div></td>
<td><div>Crimefighter Sorta</div></td>
</tr>
</tbody>
</table>
</body>
</html>
Add this line of code in the top, but use 'float' and 'width' is very good.
sorry, my english so poor.
make it display:table-row; instead of display:block
It will work like it is supposed to