When adding a CSS transformation like transform:translate(0px, -45px) to a table row, Internet Explorer (tested 10 and 11) and Microsoft Edge do not correctly display the transformation.
Using some simple code as an example:
<table style="width:500px;">
<tbody>
<tr style="height: 30px; background-color:red; color:white;">
<td>1</td>
</tr>
<tr style="height: 30px; background-color:blue; color:white;">
<td>2</td>
</tr>
<tr style="height: 30px; background-color:yellow; color:black; transform:translate(0, -45px);">
<td>3</td>
</tr>
</tbody>
</table>
This screenshot shows the problem: row 3 should be positioned on top of rows 1 and 2, but in IE/Edge, it hasn't moved. Almost any other modern browser behaves as expected. Microsoft notes that IE 10+ and Edge should support (unprefixed) transform, and based on the standard, elements with display table-row are supported.
Does anyone have any clue why this doesn't work?
As defined in the spec, transformable-elements includes elements whose display property computes to table-row. As such, you are correct to expect transform to relocate table rows on the screen. Microsoft Edge appears to lack this support.
Edge does, however, translate table cells. This may provide temporary relief for the time being. I am going to work up a few tests to ensure that we are accurately implementing this functionality.
Yeah, I am facing the same issue. You can make the tr display:block but... this will destroy your table. Let's hope microsoft will deal with this fast.
Related
Why does the CSS property overflow:scroll; not work in <td>, while overflow:hidden; works well?
<table border="1" style="table-layout:fixed; width:100px">
<tr>
<td style="overflow:scroll; width:50px;">10000000000000000000000000000000000</td>
<td>200</td>
<td>300</td>
</tr>
</table>
From the CSS specs1,2, I can't see why.
You have to wrap it in a div, that will work:
<table border="1" style="table-layout:fixed; width:500px">
<tr>
<td style="width:100px;"><div style="overflow:scroll; width:100%">10000000000000000000000000000000000</div></td>
<td>200</td>
<td>300</td>
</tr>
</table>
Firstly provide desired height to td and then Apply "float: left" property to respective "td" you want scrollbar to appear.
I got something from here!
Andrew Fedoniouk wrote:
This is actually my question:
"One technical reason is that the overflow property does not apply to
tables." - why? What is this reason?
I'm no expert, but I believe this is
just for backward compatibility with
legacy table behavior. You can check
the "automatic" table layout
algorithm in the spec. I'm pretty
sure that this layout algorithm is
incompatible with the overflow
property (or, more accurately, the
layout algorithm will never result in
the need for any value of overflow
except 'visible').
Yep, this is why I am asking. Seems like there are no formal reasons
why or should not be scrollable but seems like
UA vendors reached some silent agreement in this area. So is the
question.
The spec agrees with you with respect
to elements. Table cells are
supposed to respect overflow, although
Mozilla, at least, appears not to do
so. I can't answer your question in
this instance, although I would still
guess the answer is still tied to
legacy rendering.
The main thread is here.
<table border="1" style="table-layout:fixed; width:500px">
<tr>
<td style="width:100px;"><div style="overflow:scroll; width:100%">10000000000000000000000000000000000</div></td>
<td>200</td>
<td>300</td>
</tr>
</table>
I'm trying to build web app designed for mobiles. But I have some links which are extremely large. What i want to do is break these strings if the text doesn't fit, and use the entire string if it fits.
I tried using word-wrap:break-word:
.breakWord {
width: 100%
word-wrap: break-word;
}
My html is:
<table>
<tr>
<td rowspan="2" style="width:10%" >picture</td>
<td colspan="2" style="width:90%" class="breakWord">link</td>
</tr>
<tr>
<td style="width:80%">info1</td>
<td style="width:10%">info2</td>
</tr>
<tr>
</tr>
</table>
This code doesn't fit on the page - a horizontal scroll bar appears.
How can I make the text fit?
If you correct the errors in your source, it will work.
Remove the width:100% from the style block. It conflicts with the inline style in the td, and misses a semicolon
colpan should be colspan
Also, I believe that some browsers can get confused when encountering a colspanned td with a width style. You can safely remove the style="width:90%", since the two tds below set the width correctly already.
Edit:
So it doesn't work everywhere. According to the answers to this question, the problem is with the table: first, the width of the table is calculated, and then the 10% and 90% are taken as the calculated width instead of the available width on the screen.
So a possible solution is to give the table a specific width, and set its table-layout to fixed.
<table style="width:100%; table-layout:fixed">
I am currently re-styling a site but unforunately I am unable to edit any of the markup, which leads me to the following problem...
I have a table, similar to this:
<table>
<tr>
<td>Some content</td>
<td>Some content</td>
</tr>
<tr>
<td>Some content</td>
<td>Some content</td>
</tr>
<tr>
<td>Some content</td>
<td>Some content</td>
</tr>
</table>
and I want to display all the table cells on one line. In good browsers, I'm using:
table tr {
display: inline;
float: left;
}
to achieve this. However, this doesn't work in IE7. Is there any other CSS I can use to achieve the same effect? I have to stress that I have no access to the markup whatsoever and none of the table rows or cells have any way of accessing them directly so there's no way I can position absolutely.
You can't do that, I believe.
A tr is a table row and I'd expect the unexpected when trying to float one.
Besides, any element floated is instantly a block level element, so display: inline is redundant.
(The only exception when using it to prevent double margin bug in IE6 - but only if you have a margin set).
You could restructure the HTML with JavaScript, but I would not recommend you do that:)
I agree with #Pekka that this is illegal. The best course of action here would be to add small js to transform table into somethings else. If you have access to just css you can still do that for IEs by adding a behavior and for other browser if that work - just use your solution.
You can attempt inline-block but styling table elements with things such as float is a sin. You can attempt hiding the entire table and insert some load of loading icon while you extract the table info and display it with semantic markup.
Best course of action in this case is to ask for access. Just say you can't do the work without access to the markup. If they won't let you, just don't do the work.
To my surprise I just found out that applying text-alignment to a table column is fairly bad supported in current browsers. Neither Firefox 3.5.2, Safari 4.0.3 or IE8 shows the "amount" column below as right aligned.
HTML:
<table class="full_width">
<caption>Listing employees of department X</caption>
<col></col>
<col></col>
<col></col>
<col class="amount" width="180"></col>
<thead>
<tr>
<th>Name</th>
<th>Phone number</th>
<th>Email</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>+45 2373 6220</td>
<td>john#doe.com</td>
<td>20000</td>
</tr>
</tbody>
</table>
CSS
.amount{
text-align: right;
}
Why isn't this working? Also I tried (via firebug) to turn off Firefox' native rule that left-aligns TD elements, but that didn't work either.
I can see that setting background color rule in the amount css class actually works. So I know that the .amount class is applied to all columns:
CSS
.amount{
text-align: right;
background-color: aqua;
}
The CSS 2 spec apparently says that only four attributes are supported by col element -- see Why is styling table columns not allowed?
Criteria for selecting the best solution: must be supported fairly cross-browser (not necessarily in IE6 where I could live with using jquery or a conditional comment to include a specific solution). Also, I expect to apply multiple classes multiple different columns (ie. class="amount before_tax")
I'd hate to set classes on the relevant td in each row. What are my options?
I'd hate to set classes on the
relevant td in each row. What are my
options?
That would be it: class on each td.
If you don't want to add the class to each cell in a column manually, your only other option is to use javascript to do it.
With jQuery:
$("table tbody tr td:eq(3)").addClass("amount");
You can always set a class on on the last element in a row:
.full_width td:last-child {
text-align: right;
}
you have to set the class on the td elements. I think that's the only way.
Your answers got me thinking about creating a JQuery script that parses COL elements. Then it should find each row matching the corresponding COL and apply the COL class to each element like so:
enter code here$("table tbody tr td:eq(3)").addClass("amount");
But only do it, (as a performance improvement), if the class definition contains a text-align in it.
Of course, a full complex implementation of colspan and COLGROUP elements will be overkill and most likely not supported.
Any thoughts on that idea?
What CSS should I use to make a cell's border appear even if the cell is empty?
IE 7 specifically.
If I recall, the cell dosn't exist in some IE's unless it's filled with something...
If you can put a (non-breaking space) to fill the void, that will usually work. Or do you require a pure CSS solution?
Apparently, IE8 shows the cells by default, and you have to hide it with empty-cells:hide But it doesn't work at all in IE7 (which hides by default).
Another way of making sure there is data in all cells:
$(document).ready(function() {
$("td:empty").html(" ");
});
If you set the border-collapse property to collapse, IE7 will show empty cells. It also collapses the borders though so this might not be 100% what you want
td {
border: 1px solid red;
}
table {
border-collapse: collapse;
}
<html> <head> <title>Border-collapse Test</title> <style type="text/css"> td {
border: 1px solid red;
}
table {
border-collapse: collapse;
}
<table>
<tr>
<td></td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td></td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td></td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td></td>
<td />
</tr>
</table>
The question asked for a CSS solution, but on the off-chance an HTML solution will do, here is one:
Try adding these two attributes to the table element: frame="box" rules="all"
like this:
<table border="1" cellspacing="0" frame="box" rules="all">
I just found the following. It's standards compliant but it doesn't work in IE. sigh.
empty-cells: show
I happened across this question and haven't seen any answers that really addressed the issue.
The problem results because IE7 does not see any internal content for the cell; in programming terms the cell is resulting as a null and like most things, you cannot border a null or perform any action on it. The browser needs an element/object that has a layout, in order to apply a border/layout.
Even empty <div></div> or <span></span> do not contain content, thus there is nothing to render, resulting in that null case again.
However, you can trick the browser into thinking the cell has content, by giving the empty div/span layout properties. The easiest way is to apply the CSS style zoom:1.
<table>
<tr><td>Foo</td>
<td><span style="zoom:1;"></span></td></tr>
</table>
This workaround is better than using a , since it doesn't unnecessarily mess up screen readers, and isn't misrepresenting the value of the cell. In newer browser you can use the empty-cell:<show|hide> alternative.
Note: in lieu of Tomalak's comment, it should be understood that hasLayout has nothing to do with null, it was merely a comparison of how the browser interacts and renders hasLayout similarly to how a database or programming language interacts with nulls. It is a strech, but I thought it might be easier to understand for those programmers turned web designers.
Ideally, you shouldn't have any empty cells in a table. Either you have a table of data, and there's no data in that specific cell (which you should indicate with "-", or "n/a/", or something equally appropriate, or - if you must - , as suggested), or you have a cell that needs to span a column or row, or you're trying to achieve some layout with a table that you should be using CSS for.
Can we have a bit more detail?
This question's old, but still a top result in Google, so I'll add what I've found:
Simply adding border-collapse: collapse to the table style fixed this problem for me in IE7 (and didn't affect the way they're displayed in FF, Chrome, etc).
Best to avoid the extraneous code of adding an or other spacing element when you can fix with CSS.
I guess this can't be done with CSS;
You need to put a in every empty cell for the border to show in IE...
empty-cell only fixed Firefox (YES I really did have this issue in Firefox) IE 7 & 8 were still problematic..
This worked for me in both Firefox 3.6.x, IE 7 & 8, Chrome, and Safari:
==============================
table {
*border-collapse: collapse;}
.sampleTD {
empty-cells: show;}
==============================
Had to use the * to make sure the table style was only applied to the IE browser.
Try this if you can't use non-breakable space:
var tn = document.createTextNode('\ ');
yourContainer.appendChild(ta);
I create a div style that has the same font color as the background of your cell and write anything (usually a "-" "n/a" or "empty") to give the cell content. It shows up if you highlight the page, but when viewed normally looks how you want.
I use a mix of html and css to create cross browser table grids:
html
<table cellspacing="1" style="background-color:#000;" border="0">
css
td{background-color:#fff;}
I haven't seen any issues with any browsers so far.
"IE" isn't a useful term in this context anymore now that IE8 is out.
IE7 always does "empty-cells:show" (or so I'm told ... Vista).
IE8 in any of its "Quirks" or "IE7 Standards" modes always does "empty-cells:hide".
IE8 in "Standards" mode defaults to "empty-cells:show" and supports the attribute via CSS.
As far as I know, every other browser has correctly supported this for several years (I know it was added in Firefox 2).
I'm taking this from another website but:
.sampletable {
border-collapse: collapse;}
.sampleTD {
empty-cells: show;}
Use for the CSS for the table and TD element respectively.