CODEWITHSUNDEEP
css
Patrik BoXon Nicklasson
Patrik BoXon Nicklasson

Reputation: 659

border-radius for table doesn't work in Firefox

Everything works just as it should in Internet Explorer and Chrome. But in Firefox there is no rounded corners at all. Does anybody have a clue what the problem might be? I've tried to remove the -moz- and -webkit- tags but it doesn't make any difference. Border-radius should be supported by the latest version of Firefox, Chrome and Internet Explorer.

Any solution?

Code:

.evenOddColoursLight tr:not(.noEvenOddColoursLight), .evenOddColour1L{
background-color:#f6f6f4;
}
.evenOddColoursLight tr:nth-child(odd):not(.noEvenOddColoursLight), .evenOddColour2L{
background-color:#efeeeb;
}

.forum-table th:first-child {
-moz-border-radius: 10px 0 0 0;
-webkit-border-radius: 10px 0 0 0;
border-radius: 10px 0 0 0;
}

.forum-table th:last-child {
-moz-border-radius: 0 10px 0 0;
-webkit-border-radius: 0 10px 0 0;
border-radius: 0 10px 0 0;

}

.forum-table tr:last-child td:first-child {
-moz-border-radius: 0 0 0 10px;
-webkit-border-radius: 0 0 0 10px;
        border-radius: 0 0 0 10px;
}

.forum-table tr:last-child td:last-child {
-moz-border-radius: 0 0 10px 0;
-webkit-border-radius: 0 0 10px 0;
        border-radius: 0 0 10px 0;

}

.forum-table table tr:last-child td {
border-bottom: none;
}

.forum-table td {
padding:10px;
}

.forum-table th {
padding:5px 5px 5px 10px;
}

All the at is found at code: http://jsfiddle.net/SUhsD/

Upvotes: 2

Views: 5762

Answers (2)

Patrik BoXon Nicklasson
Patrik BoXon Nicklasson

Reputation: 659

Solved it by removing the .evenOddColoursLight and added:

.forum-table tr:nth-child(odd) td, .forum-table tr:nth-child(odd) th {
  background-color: #efeeeb;
}

.forum-table tr:nth-child(even) td, .forum-table tr:nth-child(even) th{
  background-color: #f6f6f4;
}

Upvotes: 0

Mohit Bhansali
Mohit Bhansali

Reputation: 1785

Just play with individual cells style. Working example on Firefox and Chrome: http://jsfiddle.net/AyKE7/

CSS

table {
    border-collapse: collapse;
}

th, td {
    padding: 4px 7px;
}

/* hover */
tr:hover th,
tr:hover td {
    background-color: lightblue;
}

/* hover, left cell */
tr:hover th {
    border-radius: 5px 0 0 5px;
}

/* hover, last cell on the right */
tr:hover td:last-child {
    border-radius: 0 5px 5px 0;
}

Upvotes: 2

Related Questions