I'm using Bootstrap datepicker and I would like active dates to be round. I'm currently using border-radius: 50% on the td with the active date, but it's causing issues as I would like the date table to be zebra striped
table > tbody > tr:nth-of-type(odd) {
background-color: #eee;
}
table > tbody > tr:nth-of-type(even) {
background-color: #e2e2e2;
}
See jsFiddle example here.
As you can see, obviously the background behind the round dates are visible.
Any idea how to get around this? Maybe either by letting dates be wrapped in a span inside each td or by using some css fix?
See Basically you are change border & background-color in td then white background-color display . This Scenario all table are generated .see below simple example
See small Example
table, th, td {
border: 1px solid black;
}
.active
{
background-color: green;
border-radius: 50%;
}
<table>
<tr bgcolor="#c2c2c2">
<th class="active">Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
Then My opinion Best Solutions is you can set Table
background-color and your required change tr color.then you can not fetch this problem .
Fiddle Demo Here
I can select and highlight td elements in IE but cannot highlight all td in a tr using tr:active. This works as expected in FireFox and Chrome. Here is a JsFiddle example, am I doing something wrong in the CSS?
Still doing it...
In Chrome, Safari, Opera and FF...
HTML
<body>
<br />
<div id="rowCount">
<table class='t2'>
<tr>
<th>Click a Cell should highlight all in the row</th>
</tr>
<tr>
<td>tr:active td</td>
<td>td:active</td>
</tr>
</table>
</div>
</body>
CSS
table {
cursor: default;
border: 1px solid black;
background-color: transparent;
}
div {
z-index: 0;
display: block;
border:4px solid #CC3300;
width: 80%;
background-color: #4D70DB;
}
th{
text-align: left;
}
td{
border: 1px solid #000000;
}
tr:hover td {
border:1px solid #CC3300;
}
tr:active td{
background-color: #CC3300;
}
td:active {
color: aqua;
}
This is correct, the tr:active is not working on IE11 and below. I have not tested on the Edge browser yet, but this is clearly a bug. It can be reproduced in IE9, 8, 7 as well.
After doing a bit of research, I found that most other browsers had this bug too before. See that bug report on Firefox (exactly the same problem).
I searched Microsoft Connect and did not find a bug report that was reporting exactly your problem. I created a new bug report that you can follow using this link.
Like some said in the comments of the topic post, another post on Microsoft Connect was also strongly related, you can follow this bug report here.
Thank you for pointing that out. It is a really good find.
PS: That is sadly the maximum I can do. Later today I will test on Edge to see if this problem is resolved on this new browser.
UPDATE
The Microsoft Edge Team contacted me to add:
"This issue appears to be fixed in MS Edge."
I would really appreciate some help.
I have a problem with html markup in asp.net, so, have to make workaround. For Firefox and Opera, everything is perfect, but Chrome on Safari still have one issue.
I want to make last <th> tag unbordered. Header <tr> line has "bordered" css class. Here is css part:
.bordered th
{
border: 1px solid black;
}
.bordered th:last-child
{
border: 0px none white;
border-bottom: 0px none white;
}
HTML markup:
`<table class="bordered" cellspacing="0" border="0" id="ctl00_body_gvTimeTable" style="border-collapse:collapse;">
<tr style="border-width:0px;">
<th scope="col">One</th>
<th scope="col">Two</th>
<th scope="col">Three</th>
<th scope="col"> </th>
</tr>`
But still last <th> stays underlined. What's the problem?
I checked this out in jsFiddle. I wasn't able to see any problem in Chrome (version 15) nor Safari (version 5).
I made a slight adjustment to your CSS (changed your border values to zero - as suggested by Stack Overflow):
.bordered th { border: 1px solid black; }
.bordered th:last-child { border: 0; border-bottom: 0; }
Something to note, :last-child is a CSS3 selector. That means it will not work in IE8 or below (unless you are using Selectivizr or similar).
:last-child will select the last child element of the targeted parent (in this case, .bordered th). You'll need to use something like th:last-of-type.
Try throwing it an !important this will override any previously given stylings, aswell as stylings that would override it later on.
.bordered th
{
border: 1px solid black;
}
.bordered th:last-child
{
border: 0 !important;
border-bottom: 0 !important;
}
I have a table with the following CSS rules applied:
table { border-collapse: collapse; }
td { border: 2px solid Gray; }
I want certain cells to have a red border, instead.
td.special { border: 2px solid Red; }
This doesn't work as I'd expect. In FireFox 3 and IE8 it looks like this:
(source: control-v.net)
In IE7 Compatibility mode (Running in IE8) it looks like this:
(source: control-v.net)
I want all four sides of the <td> to be red. How can I do this? A test case can be found here.
There's another post on the site I read a while ago that gracefully solves this problem, but I couldn't find it. Anyway, the approach was to make the border-style double instead of solid. This works because double has a higher priority than solid. On 1px or 2px borders, the gap between the double lines doesn't appear because the lines overlap.
table { border-collapse: collapse; }
td { border: 2px solid Gray; }
td.special { border: 2px double Red; }
<table>
<tr><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td class="special">a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td></tr>
</table>
Won't be possible using border-collapse. You could work around the problem somewhat though, for example by doing this:
<td class="special"><div>Two</div></td>
Then applying a style like this:
.special div {
border: 2px solid #f00;
margin: -2px;
}
What (hopefully) will happen is the div inside the td will expand outward by 2 pixels and cover the black border with a red border.
Using pseudo elements:
You can use a pseudo element to achieve this.
Just absolutely position the pseudo element relative to the parent td element. Make the pseudo element fill the entire dimensions of the parent element, and then add the border to it.
Example Here
table {
border-collapse: collapse;
}
table td {
position: relative;
border: 1px solid #000;
padding: 2px;
}
table td.selected:after {
content: '';
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
border: 2px solid red;
}
<table>
<tr>
<td>One</td>
<td>One</td>
<td>One</td>
</tr>
<tr>
<td>Two</td>
<td class="selected">Two</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
<td>Three</td>
<td>Three</td>
</tr>
</table>
border-collapse means the td's don't actually have some of their borders. You'll have to find some other way to do it. Giving the table a background and taking away all borders but leaving the td margins gives a nice border. Then setting a border would give an internal border, I believe. Would that work?
Is there any workaround for the following "1 pixel to the left" bug?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<body>
<div style="padding: 50px">
<div style="border: 1px solid red">Table header info</div>
<table style="border: 1px solid green; border-collapse: collapse; width: 100%">
<tbody>
<tr>
<th>Col1</th>
<th>Col2</th>
</tr>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
</tbody>
</table>
<div style="border: 1px solid red">Table footer info</div>
</div>
</body>
</html>
It looks like this:
Is there any pure CSS solution to this?
Edit
I was bit unclear about my table so here it is again:
With border-collapse:
With cellspacing="0" and without border-collapse as suggested:
So now the borders inside my table are doubled, but I want 1px border across my table.
When I remove 1px border from table I end with:
Borders are still doubled inside my table.
I could set only right and bottom border for every TD, TH and left border for every first-child in TR to achieve what I want, but I think there's a simpler way?
For those who prefer to keep presentation out of the markup, or who don't have access to the markup, here is a purely CSS solution. Just ran into this problem myself, and tested this solution in FF3.5, IE6, IE7, IE8, Safari 4, Opera 10, and Google Chrome.
table { border-spacing: 0; *border-collapse: collapse; }
This sets the table to use border-spacing in all browsers (including the culprit, Firefox). Then it uses the CSS star hack to present the border-collapse rule only to IE, which doesn't properly apply border-spacing (you could also include a separate stylesheet for IE with conditional comments if you don't like hacks).
If you prefer using cell-spacing, by all means use it. This is simply offered as an alternative method using CSS.
Remove the border-collapse and use cellspacing=0 instead.
<table style="border: 15px solid green; width: 100%" cellspacing="0">
It happens because when you set border-collapse:collapse, Firefox 2.0 puts the border to the outside of the tr. The other browsers put it on the inside.
Set your border widths to 10px in your code to see what is really happening.
edit after OP edit
You can use the old table "border" trick. Set the background color on the table. Set the td and th color to white. User cellspacing = 1;
table {background-color: green;width:100%;}
td, th{background-color:white;}
<div style="padding: 50px">
<div style="border: 1px solid red">Table header info</div>
<table cellspacing="1" >
<tbody>
<tr>
<th>Col1</th>
<th>Col2</th>
</tr>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
</tbody>
</table>
<div style="border: 1px solid red">Table footer info</div>
</div>
This issue no longer exists. In Firefox 47.0.1, the following CSS doesn't exhibit the one pixel problem:
table {
border-collapse: collapse;
}
th, td {
border: solid 1px #000;
}
We can also get clean one-pixel borders to work without relying on a working implementation of border-collapse, like this:
table {
border: solid 1px #000;
border-width: 0 1px 1px 0;
border-spacing: 0;
}
th, td {
border: solid 1px #000;
border-width: 1px 0 0 1px;
}
You see what it's doing? The trick is that we put only a top and left border on the cells:
+------+------
| cell | cell
+------+------
| cell | cell
This leaves the table without a right and bottom edge: we style those onto table
+------+------- | +-------+------+
| cell | cell | | cell | cell |
+------+------- + | = +-------+------+
| cell | cell | | cell | cell |
| | ---------+ +-------+------+
The border-spacing: 0 is essential otherwise these lines will not connect.
Best CSS only solution:
Add
td {
background-clip: padding-box
}
More information: https://developer.mozilla.org/en-US/docs/CSS/background-clip
Thanks to #medoingthings
table { border-spacing: 0; border-collapse: collapse; } /* works in FF 3.5 */
table { border-spacing: 0; *border-collapse: collapse; }
wasn't working for me in FF 31. Since i've different colors for thead and tbody cells the table background-color trick wasn't working, too. The only solution was the following:
table {
border-collapse: separate;
}
table tbody td {
border: 1px solid #000;
border-top: none;
border-left: none;
&:first-child {
border-left: 1px solid #000;
}
}
table thead th {
border-bottom: 1px solid #ff0000;
&:first-child {
border-left: 1px solid #ff0000;
}
&:last-child {
border-right: 1px solid #ff0000;
}
}
I was bitten by this today. The offered work-arounds didn't work for me, so I found my own:
table { border: 1px solid transparent; border-collapse: collapse; }
This way, you get collapsed borders, no double borders, and everything within the boundaries you desire, without browser-specific rules. No drawbacks.
I don't think I've ever heard of a "1px to the left bug," you should upload your code someplace so we can check it and make sure it's not an "I missed something somewhere" bug :) I would also suggest running through your markup with Firebug to determine if there is anything else going awry.
I ran into this problem - but in my case it had to do with the table being nested within a div set to overflow:hidden. I removed this and it worked.
Ran into this issue and as a work around. I used :
table{border-collapse:separate;border-spacing:1px;border:none;background-color:#ccc;}
table td{border:none;}
basically cheated the border by using a background color. Which thus prevented double inside borders.
My solution is as follows.
Remove border-collapse, border and border-spacing from CSS.
Add this JavaScript code:
$('table tbody tr td').css('border-right', '1px solid #a25c17');
$('table tbody tr td').css('border-bottom', '1px solid #a25c17');
$('table tbody tr td:last-child').css('border-right', 'none');
$('table').css('border-bottom', '1px solid #a25c17');
To be honest, I don't know why it works. It's jQuery magic.
I also have run into this problem the full proof solution is very simple in your asp:gridview just add
GridLines="None"
and the lines disappear in Firefox no css modification needed.