I have an issue that seems to be isolated to Chrome...which is usually NOT the way it goes. However, I have recreated the issue as purely as possible in the following plunkr.
http://plnkr.co/edit/k0viyc
To illustrate the problem, here is an image that displays the border in the highlighted row in Chrome and how it isn't showing in IE.
If you remove either of the following rows:
<tr class="spacer">
<td colspan="14" class="noBorder noBackground">
*** By removing this row, the extended border goes away ***
</td>
</tr>
You will see the associated border shows/hides.
We've been through lots of tests on this and can't isolate the problem. The primary css remains in the plunkr, including the inline styles and classes that are primarily byproducts of related bindings.
I would like to know if there is an error in the current design or if this is truly a bug in Chrome. If it's a bug, what is the least common elements here needed to recreate it? Is it worth submitting as a bug or is this just going to be a scenario we should just try to avoid.
Thanks for your time in advance.
Looks like to be a Chrome bug.
Minimal showcase reproducing it
.test {
border-collapse: collapse;
}
td {
border: solid 1px blue;
}
.no {
border: none;
}
<table class="test">
<tr>
<td>one</td>
<td class="no">two</td>
</tr>
<tr>
<td class="no" colspan="2">double</td>
</tr>
</table>
Chromium tracking (somehow) related border rendering bug
A little disturbing the mention
It's a known (old) issue in our table code. Collapsing borders are
determined based on adjacent cells and our code doesn't deal correctly
with spanning cells (we only consider the cell adjoining the first row
/ column in a row / column span). On top of that, our border
granularity is determined by the cell's span.
To fix this bug, we would need to overhaul our collapsing border code,
which is a big undertaking.
In conclusion:
If the table has border-collapse
and the cell is colspaning
Then different border settings (for that cell, implicitly) will fail
Posibilities to fix it:
Setting border-style: hidden to the cell has higher priority and will hide all the borders (not good)
Removing colspan in the spacers
or maybe remove fully the spacers rows and handle the display without them.
Some glitch related to tr.spacer.
As a workaround set colspan=7 to td in tr.spacer.
Since this seems to be a bug with Chrome—instead of using a colspan, you could write out the remaining cells needed to complete the row, and be sure that they don't have a class that includes a border.
This:
<tr><td class="border">1</td><td class="border">2</td><td class="no-border">3</td></tr>
<tr><td colspan="3" class="no-border"> </td></tr>
Would become:
<tr><td class="border">1</td><td class="border">2</td><td class="no-border">3</td></tr>
<tr><td colspan="2" class="no-border"> </td><td class="no-border"> </td></tr>
I had to use border-collapse, and was having the same problem. This simple HTML markup change worked for me.
After days of this issue being on my mind, a super hacky solution finally hit me.
Set the border color to the same color as your background.
td {
border: 1px solid (background color);
}
Related
I have a table where I want to force page breaks before certain TR's when printing, so I searched around and found Applying "page-break-before" to a table row (tr), seemed simple enough: set display to block and use page-break-before as usual. However, it doesn't seem to be working (at least not in Chrome 59, Windows). For example:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
tr.break-here {
display: block;
page-break-before: always;
}
</style>
</head>
<body>
<table>
<tr class="break-here"><td colspan="2">
<tr><td colspan="2">section
<tr><td>a<td>b
<tr><td>a<td>b
<tr><td>a<td>b
<tr class="break-here"><td colspan="2">
<tr><td colspan="2">section
<tr><td>a<td>b
<tr><td>a<td>b
<tr><td>a<td>b
<tr class="break-here"><td colspan="2">
<tr><td colspan="2">section
<tr><td>a<td>b
<tr><td>a<td>b
<tr><td>a<td>b
</table>
</body>
</html>
When printed, all three of those sections are on the same page, but it should be three separate pages.
There was a suggestion there to use a pseudo-element, which I tried to no avail. There was also a suggestion to ensure the TR's TD contained a block-level element, so I tried putting empty div's in the relevant cells in that example, also with no change.
There is also How to apply CSS page-break to print a table with lots of rows?, where I've tried:
This answer: No effect:
tr.break-here { display:block; page-break-after:always; }
tr.break-here { page-break-after:always; }
What am I doing wrong here? How do I do this? I'm also a little confused because the answer on the linked question seems well received with no issues noted in comments. Splitting the table into three tables is not an option, as I need column widths (which are auto-fit to complex content) to be identical on all pages.
I found a solution based on this answer and some experimentation, I have no idea why it works:
<tr>
<td>
<div></div>
<div style="page-break-before:always"></div>
All of the following are important:
No page break styling on the tr.
The cell must contain at least two divs.
Any div except the first must be page-break-before:always.
If the cell only contains one div it doesn't work. Unlike in that answer, clear:both does not seem to matter, nor does the third div.
I was unable to find a working solution that did not involve adding divs to the tr (e.g. with pseudo-elements).
So this is what I'm doing for now, although I wouldn't mind somebody explaining what's going on here or, more importantly, why the solution in the original linked question (display:block; page-break-before:always; on the tr) did not work for me.
I've got a set of tabular data that I'm presenting in a standard HTML table tag. The design calls for a one pixel separating line between each row as well as having all cells in a given row be vertically centered against each other. The various rows and cells can have an arbitrary height and need to grow based on the content inside of them.
The tricky piece here comes from the fact that the one pixel separating line is supposed to stop 15px from either side of the edge of the table. My initial inclination to solve this is to merely add a border-bottom to either my <tr> or <td> tags, however, I couldn't for the life of me figure out any sort of way to not get the line to go all the way across. If I put <div> tags inside of the <td> tags, I can then apply the border to there, but then my border bottom is right up against the bottom of the content rather than at the bottom of the row.
The only thing I've been able to make work feels really "dirty" to me.
<table>
<tr>
<td style="width: 15px;"> </td>
<td style="border-bottom: 1px solid gray;">My table data</td>
.... more cells here as needed
<td style="width: 15px;"> </td>
</tr>
</table>
This works because I add those two spacer cells on either end of the row. I've even gone pretty far down some non-table solutions, but I always run into issues trying to get the content to grow correctly (i.e. no absolute positioning in the various rows) and/or getting things to vertically center and wrap like they are supposed to.
Anybody have any better ideas? If it helps, I'm only supporting "newer" browsers, e.g. IE9+/etc, including mobile.
You can try adding a new row between each pair or rows with colspan="n" where n is the total number of collumns, and inside that new row you put a div with the desired specs (I would say 1px height, for instance).
HTML, add this between your rows:
<tr class="test_tr" >
<td colspan="3"><div class="test_div"></div></td>
</tr>
CSS:
.test_tr
{
height: 1px;
}
.test_div {
height: 1px;
width: 80%;
background-color: red;
margin: 0 auto;
}
Here is the Fiddle: http://jsfiddle.net/Y8eWR/
I am facing the issue with html Table element cell width. Width of the table cell is not same in IE8 and IE9. Please find the below code snippet where I set the width for table cell using table colgroup and width for table as 100%.
[Html]
<table id="Grid1_Table" class="Table">
<colgroup>
<col style="width:20px">
<col style="width:20px">
<col style="width:180px">
<col style="width:200px">
</colgroup>
<tbody>
<tr>
<td class="RowHeader"><div> </div></td>
<td class="RecordPlusCollapse" ><div> </div></td>
<td colspan="2" class="GroupCaption">Order ID: 0 - 1 Items</td>
</tr>
</tbody>
[CSS]
.RowHeader
{
background-color : black;
}
.GroupCaption
{
background-color : #868981;
}
.RecordPlusCollapse
{
background-color : red;
}
.Table
{
width:100%;
}
Please refer the below fiddler file to check the issue with IE8 and IE9.
http://jsfiddle.net/KgfsM/21/
Could you please check on this?
First of all, the markup violates the HTML table model; if you try to validate the code snippet using HTML5 doctype (and the missing </table> added), the validator will report the error “Table column 4 established by element col has no cells beginning in it.”
Second, you are setting column widths in pixels and the total table width as 100%. This constitutes a request that cannot be fulfilled except in a very special case where the available width happens to coincide with the sum of the pixel widths plus borders, border spacing, and cell spacing. It’s no wonder that browsers react differently to this.
Thus, you need to specify the widths consistently. Either remove the setting of 100% width, or remove at least one of the column width settings. You might still have a problem (browsers may react differently even to this), and table-layout: fixed might not help (or might introduce new problems), but then there would a new, relatively well-defined problem.
I currently have a java script solution to make an entire table row clickable. I need to support the non-java script folks so is this possible without java script?
I can add a a href tag to each cell but that seems like overkill and it also only lets the user click on the contents of the cell.
Any other alternatives to turn an entire table row into a hyperlink?
Not without putting a link inside each cell unfortunately, otherwise it's not valid markup.
You can still make it appear like the "row" is clickable though by making the links display as blocks so they take up the entire cell.
e.g. (jsFiddle)
<table>
<tr>
<td>Some text</td>
<td>more text</td>
<td>more text</td>
</tr>
</table>
tr:hover { background: #ddd; }
td { border: 1px solid #000; border-collapse: collapse; }
td a { display: block; padding: 5px 20px; }
I realise this is an old thread with a perfectly legit solution in Rich's answer. There is however also a way to do this without javascript AND without duplicating your link * the number of columns AND keeping your markup/CSS valid. It took me a while to figure out, so I thought I'd post it here for others that also happen to end up on this thread like I did.
Put the link in the first column:
<table class="search_results">
<tr>
<td>Some text</td>
<td>more text</td>
<td>more text</td>
</tr>
</table>
This is perfectly fine markup, so your only real issue is getting that link to span the width of your table. I did it like this using pretty standard CSS:
table.search_results a {position:absolute;display:block;width:98%;}
Change the width to whatever you want and in principle you are done and dusted. So that is all relatively easy, however if you, like me, have a fluid/responsive layout, and also some standard styling on your links plus some padding on your tables, you are going to need these rules (copied necessary from above and added extra).
table.search_results td:first-child {padding:0;}
table.search_results a {position:absolute;display:block;width:98%;max-width:1272px;font-weight:normal;color:#000;padding:.5em;}
table.search_results a:hover {background:none;}
table.search_results tr:hover {border-color:#25505b;background:#b5d6dd;}
To explain:
The first rule removes all padding on my first td ONLY. By default the padding on my td is .5em.
The second rule adds the same padding back on the link, otherwise you end up with misaligned cell contents. It also corrects a few standard styles I have on my a to ensure the columns all look the same. You could do this the other way around too (add the link styles to your td).
With the last two rules I get rid of the default hover effect on my links, then put it on the tr for any tables with the right class.
This works in the browsers I care about, but you should of course test in those you care about :) Hope I help save someone some minutes with this writeup!
Various browsers may or may not allow you to wrap the entire TR with an href, HOWEVER, even if the browser supports this, it is not valid (X)HTML and the results will vary from browser to browser in a very unreliable way (updates could change behavior as well).
Your best bet is to either use JS, or put an href inside of each cell.
I have an empty table row just for separation between rows.
<tr>
<td colspan="5"></td>
</tr>
It's rendered in IE, FF, Opera and Safari. The question is, whether I should put some content inside of it or it is okay to leave it as it is?
Like:
<tr>
<td colspan="5"> </td>
</tr>
Well you could put an as column content to make sure the rows are displayed. The better way is to use CSS for spacing though.
Semantically, does the empty row serve a purpose, or is it purely for layout? If the latter, it may be worth considering dropping the empty row, and providing the separation via CSS. E.g.
<tr class="separate-below">
<td>Data before separater</td><td>More Data</td>...
</tr>
<tr>
<td>Data after separater</td><td>More Data</td>...
</tr>
With the following in the stylesheet:
TR.separate-below TD,TR.separate-below TH {
border-bottom: 1em solid white; /* use the background colour of a cell here */
}
Alternatively, you can use multiple <tbody> elements to group blocks of rows together (adding rules="groups" to the table element causes <tbody> elements to gain a horizontal border at top and bottom, and <colgroup> element to gain a border to their left and right):
<table rules="groups">
<thead>
<tr><th>Header</th><th>Header</th>...</tr>
</thead>
<tbody>
<tr><td>Data</td><td>Data</td>...</tr>
<tr><td>Data</td><td>Data</td>...</tr>
...
</tbody>
<tbody>
<tr><td>Data</td><td>Data</td>...</tr>
...
</tbody>
...
</table>
As you can see in this example from W3Schools using the is the best way to do what you want.
This is a very old question, but if somebody still needs a solution (problem exists with display: table-cell or table-row elements)
here's the solution:
.emptyElement:after{
content: "\00a0";
}
I wanted to add my solution which is a modification of #Dariusz Sikorski solution.
td:empty:after, th:empty:after {
content: "\00a0";
}
if you want to put content inside, i would use a no-breaking-space: , rather than a normal blank
You may have already tried this but if your trying to add some space in between rows have you tried adding some padding.
CELLSPACING=Length (spacing between cells)
CELLPADDING=Length (spacing within cells)
Karl
To ensure that empty cells are displayed the following CSS can be used:
table { empty-cells:show; }
You can use multiple tbody tags to group table rows. It's totally valid and more semantic.