I want to be able to change color of any table cell border.
I've decided to not use border-left, border-right, etc, because it's not possible to make it pixel-perfect. Different browsers render it in a different way. Especially in borders intersection area.
I came up with the approach, but it's not working in IE as I expected:
HTML:
<table>
<tr>
<td>
line 1
<div class="left-border"></div>
</td>
<td>
line 1<br>
line 2
</td>
<tr>
</table>
CSS:
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid #ccc;
}
tr {
vertical-align: top;
}
td {
position: relative;
padding: 5px;
}
.left-border {
position: absolute;
top: -1px;
bottom: -1px;
left: -1px;
width: 1px;
background-color: #000;
}
JSFIDDLE: http://jsfiddle.net/dv1oqopL/5/
well IE is a B***h as always, it just calculates the height of the td based on it's own content so I have no clean fix for you but a hack that might solve your issue is to add
border-left:1px solid #000;
on that td, this will fill the border underneath your div and look the part an all browsers.
Related
I have a large HTML table that is created dynamically.
The table has a standard structure, incl. colgroup, thead and tbody and the below styles.
So far everything works as intended but when I add the class "bgGrey" to the TDs in one column (see below) in order to give the cells in this column a background color (which is only needed on one column) then all borders of this column disappear in IE11, except for the left border, and the :hover::before style doesn't work anymore in Chrome (version 43).
Without adding the class "bgGrey" I have no issues in both browsers.
It seems that somehow the background color overlaps the border causing this.
My CSS (relevant part):
#myTable, #myTable tbody, #myTable thead, #myTable tr {
width: 100%;
}
#myTable, #myTable th, #myTable td {
border: 1px solid #000;
border-collapse: collapse;
margin: 0;
padding: 4px;
position: relative;
}
#myTable {
font-size: 14px;
table-layout: fixed;
}
#myTable th.editable:hover::before, #myTable td.editable:hover::before {
border: 1px solid blue;
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
}
#myTable .th1 {
padding: 2px;
}
#myTable .th2 {
font-weight: normal;
}
.bgGrey {
background-color: #e6e6e6;
}
My HTML (example TR):
<tr>
// ...
<td class="editable"><div contenteditable="true"></div></td>
<td class="bgGrey editable txtCenter"><div contenteditable="true"></div></td>
<td class="editable txtRight"><div contenteditable="true"></div></td>
// ...
</tr>
I just came upon this problem myself, but I didn't like the solution presented here, so I kept googling. I found this answer: https://stackoverflow.com/a/16337203/1156476
Here, a simple addition to the table cell fixes the borders:
table td {
border: 1px solid #000;
border-collapse: collapse;
margin: 0;
padding: 4px;
position: relative;
background-clip: padding-box; /* Add this line */
}
Check browser support at Caniuse
And an explanation of the property can be found at Standardista
Please remove border-collapse: collapse; from #myTable td, which causes the border to disappear. Avoid giving that for td.
Add like this instead:
#myTable, #myTable th, #myTable td {
border: 1px solid #000;
border-collapse: collapse;
margin: 0;
padding: 4px;
position: relative; //REMOVE THIS
}
Also please can you try removing "position:relative" from the CSS?
I'm having some trouble with the positioning of tooltips on a column of data within a table, which itself is inside a vertical scrolling div. A little background for you...
Due to legacy issues which are beyond my control, the page I am developing has to be displayed through an iframe of fixed width and height. The data I need to display has about 12 columns, all of which are required to be displayed. One column will contain serial numbers, which sometimes end up overflowing the bounds of the cell. I've set the overflow of this column to show an ellipsis, and have added tooltips as described in the accepted answer to this question.
When the tooltips are added, it appears to take the distance from the top of the table to the hovered cell, and draw the tooltip that distance from the top of the parent div. This means that, when you scroll down through the div, the tooltips end up being drawn down below the bottom of the div.
I've created a jsFiddle which demonstrates this: http://jsfiddle.net/kuzxLwxe/4/
Here's my css:
.ResultsWrapper {
width:150px;
height:314px;
text-align:center;
overflow-x:hidden;
overflow-y:scroll;
border:1px solid black;
}
.ResultsTable {
width:86px;
border-collapse:collapse;
table-layout:fixed;
}
.ResultsTable th, .ResultsTable td {
border:1px solid black;
overflow:hidden;
text-overflow:ellipsis;
}
.ColumnSerialNo {
width:81px;
}
.hasTooltip span {
display: none;
color: #000;
text-decoration: none;
padding: 3px;
}
.hasTooltip:hover span {
display: block;
position: absolute;
background-color: #FFF;
border: 1px solid #CCC;
margin: 2px 10px;
}
And my html:
<div class="ResultsWrapper">
<table class="ResultsTable">
<thead>
<tr>
<th class="ColumnSerialNo">Serial Number</th>
</tr>
</thead>
<tbody>
<tr>
<td class="hasTooltip">3119985815206<span>3119985815206</span></td>
</tr>
<tr>
<td class="hasTooltip">5665811486586<span>5665811486586</span></td>
</tr>
...
</tbody>
</table>
</div>
I'm using jQuery for other things within the same page, but so far haven't been able to come up with a solution with it. If you think the best way to fix this is by using JS or jQuery I'd love to see the result!
Thanks in advance
Change your HTML markup to take more control on overflow:
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815206</div>
<div class="SerialNumberTooltip">3119985815206</div>
</div>
</td>
</tr>
And in your CSS, remove overflow from td:
.ResultsTable th, .ResultsTable td {
border:1px solid black;
/* overflow: hidden; this line should delete */
text-overflow:ellipsis;
}
And new CSS:
.SerialNumberContainer {
position: relative;
z-index: 10;
}
.SerialNumber {
width: 80px;
overflow: hidden;
}
.SerialNumberTooltip {
position: absolute;
top: 10px;
left: 2px;
background-color: #FFF;
border: 1px solid #CCC;
display: none;
}
.SerialNumberContainer:hover {
z-index: 20;
}
.SerialNumberContainer:hover .SerialNumberTooltip {
display: block;
}
JSFiddle Demo.
In the example below, there is a border on top of the right cell. It only appears in Chrome, is it a Chrome bug?
HTML / CSS
html,
body {
height: 100%;
}
table {
border-collapse: collapse;
width: 100%;
height: 100%;
}
.left {
border-right: 1px #aaaaaa solid;
border-top: 1px #aaaaaa solid;
}
<table>
<tr>
<td colspan=2>top</td>
</tr>
<tr>
<td class="left">left</td>
<td>right</td>
</tr>
</table>
Here is the example as a fiddle.
Chrome Screenshot
This appears to be the same bug listed here (or similar)
An easy workaround is at the bottom of this answer.
This is a relevant comment under that bug report:
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.
Here is an example that highlights the same problem:
html,
body {
height: 100%;
}
table {
border-collapse: collapse;
width: 100%;
height: 100%;
}
.left {
border-right: 1px #aaaaaa solid;
border-top: 1px #aaaaaa solid;
}
.right {
border-top: double 20px #F00;
}
<table>
<tr>
<td colspan=2>top</td>
</tr>
<tr>
<td class="left">left</td>
<td class="right">right</td>
</tr>
</table>
I added this:
.right { border-top: double 20px #F00; }
Which results in this in Chrome:
That grey border would not be between the double red border if it was not a bug.
For comparison, this is how it should look (taken in Firefox):
Here are the rules of border conflicts:
Rule 1: You do not talk about border conflicts
The following rules determine which border style "wins" in case of a conflict:
Borders with the 'border-style' of 'hidden' take precedence over all other conflicting borders. Any border with this value suppresses all borders at this location.
Borders with a style of 'none' have the lowest priority. Only if the border properties of all the elements meeting at this edge are 'none' will the border be omitted (but note that 'none' is the default value for the border style.)
If none of the styles are 'hidden' and at least one of them is not 'none', then narrow borders are discarded in favor of wider ones. If several have the same 'border-width' then styles are preferred in this order: 'double', 'solid', 'dashed', 'dotted', 'ridge', 'outset', 'groove', and the lowest: 'inset'.
If border styles differ only in color, then a style set on a cell wins over one on a row, which wins over a row group, column, column group and, lastly, table. When two elements of the same type conflict, then the one further to the left (if the table's 'direction' is 'ltr'; right, if it is 'rtl') and further to the top wins.
Workaround
Here is a workaround, just don't use border-collapse: collapse:
table {
border-collapse: separate; /* the default option */
border-spacing: 0; /* remove border gaps */
}
td {
padding: 20px;
border-right: solid 1px #CCC;
border-bottom: solid 1px #CCC;
}
td:first-child {
border-left: solid 1px #CCC;
}
table {
border-top: solid 1px #CCC
}
<table>
<tr>
<td colspan="3"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
table {
border-collapse: separate; /* the default option */
border-spacing: 0; /* remove border gaps */
}
td {
padding: 20px;
border-right: solid 1px #CCC;
border-bottom: solid 1px #CCC;
}
td:first-child {
border-left: solid 1px #CCC;
}
table {
border-top: solid 1px #CCC
}
Since its a Chrome-Bug let's think up a workaround. So far I only came up with one that involves changing the html:
http://jsfiddle.net/5366whmf/24/
It adds another row:
<table style="border-collapse: collapse">
<tr><td colspan=2>top</td></tr>
<tr><td style="height: 0"></td></tr> <!-- fix for chrome -->
<tr><td style="border-top: 1px solid red">left</td><td>right</td></tr>
</table>
I need to add up-right triangle in a cell.
How to do this?
I tried to add span and icon inside span, but it goes awry
<span style="position: relative;float:right;top:-30px;">#Html.ImageContent("triangle_bonus.png", "")</span>
Using CSS Triangles:
You basically have a 0 height, 0 width element, and use the borders to construct the triangle. Because the line between borders (for example, between top and left) is diagonal, you can create nice looking, solid color triangles with it!
Here's an Example!
HTML:
<table border="1">
<tr>
<td class="note">Triangle!</td>
<td>No Triangle!</td>
</tr>
</table>
CSS:
td {
padding: 20px;
}
.note {
position: relative;
}
.note:after { /* Magic Happens Here!!! */
content: "";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
display: block;
border-left: 20px solid transparent;
border-bottom: 20px solid transparent;
border-top: 20px solid #f00;
} /* </magic> */
Advantages:
No Images! - Meaning, no extra request.
No Additional Markup! - Meaning, you don't litter your HTML with unsemantic markup.
Looks good on all sizes! - Because it renders in the browser, it would look perfect on any size and any resolution.
Disadvantages:
Depends on pseudo-elements - Meaning that lower versions of IE will not display the triangle. If it's critical, you can modify the CSS a bit, and use a <span> in your HTML, instead of relying on :after.
Found this question through Google and ran into issues, so I'll add this here despite the age of original post.
Madara's answer works in most browsers, and works anywhere outside of a table in all browsers. But as mentioned in the comments, the example doesn't work in Firefox.
There's a very old ticket in Bugzilla concerning position:absolute; not working in <td> elements.
The main solution is to add an inner <div>:
HTML:
<table border="1">
<tr>
<td><div class="note">Triangle!</div></td>
<td>No Triangle!</td>
</tr>
</table>
CSS:
td .note {
padding: 20px;
}
jsFiddle example
I did find that it was possible to achieve without an inner <div> but only when the <td> was empty, which probably doesn't help.
To do cell text inside div it good idea. but if you just put extra div for ARROW not for text. because it creates problem when td has given width and height and text stays on TOP with padding-top:20px;.
I found another solution and tested on All major browsers (eg: IF and FF as well)
.arrow-right-1 {
position: absolute;
top: -1px;
right: -5px;
float: right;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid red;
transform: rotate(45deg);
}
td {
border: solid 1px blue;
width: 160px;
height: 100px;
/* padding: 0px !important; */
/* vertical-align: top; */
position: relative;
}
<table class="table">
<tbody>
<tr>
<td>
<div class="arrow-right-1"></div>you can increase or decrease the size of td's height or can put more text
</td>
</tr>
</tbody>
</table>
Here is HTML:
<table>
<tr>
<td>Smth:</td>
<td>Lalala</td>
</tr>
</table>
Here is CSS:
table
{
border: 1px dotted black;
border-radius: 25px;
}
table td
{
padding: 15px;
}
When I use border-radius and border together, it messes up.
Is it possible to correct that? (I can't show it in jsFiddle, because border-radius doesn't work there)
table {border-collapse:separate;}
http://jsfiddle.net/seler/28p9W/