I wish to achieve a table border like this (notice the thick border under the 3rd row):
So, I coded as the one given below,
body {
font-family: Roboto Condensed;
background-color: hsl(0, 0%, 25%);
color: white;
padding: 2px 5px 2px 5px;
}
table {
border: 2px solid;
border-collapse: collapse;
width: 100%;
}
caption {
font-weight: bold;
border: 2px solid;
border-collapse: collapse;
padding: 8px;
padding-top: 12px;
padding-bottom: 12px;
}
th {
border: 2px solid;
padding: 8px;
padding-top: 12px;
padding-bottom: 12px;
background-color: hsla(0, 0%, 50%, .5);
width: 10%;
}
td {
border: 1px solid #ccc;
padding: 8px;
width: 15%;
}
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet" type="text/css">
<table>
<caption>TableCaption</caption>
<tr>
<th>TableHeader</th>
<th>TableHeader</th>
<th>TableHeader</th>
<th>TableHeader</th>
<th>TableHeader</th>
</tr>
<tr>
<th rowspan="2">SpannedRow1</th>
<td>TableData</td>
<td>TableData</td>
<td>TableData</td>
<td>TableData</td>
</tr>
<tr>
<td>TableData</td>
<td>TableData</td>
<td>TableData</td>
<td>TableData</td>
</tr>
<tr>
<th rowspan="2">SpannedRow1</th>
<td>TableData</td>
<td>TableData</td>
<td>TableData</td>
<td>TableData</td>
</tr>
<tr>
<td>TableData</td>
<td>TableData</td>
<td>TableData</td>
<td>TableData</td>
</tr>
</table>
And it ends up like this (notice that the border under third row isn't thick):
Now I would like to know in which way if handle the table border so that I can have the expected result.
You can try using nth child for the table row as below:
tr:nth-child(3) {
border-bottom: 2px solid white;
}
Here I have updated your code snippet:
body {
font-family: Roboto Condensed;
background-color: hsl(0, 0%, 25%);
color: white;
padding: 2px 5px 2px 5px;
}
table {
border: 2px solid;
border-collapse: collapse;
width: 100%;
}
caption {
font-weight: bold;
border: 2px solid;
border-collapse: collapse;
padding: 8px;
padding-top: 12px;
padding-bottom: 12px;
}
th {
border: 2px solid;
padding: 8px;
padding-top: 12px;
padding-bottom: 12px;
background-color: hsla(0, 0%, 50%, .5);
width: 10%;
}
td {
border: 1px solid #ccc;
padding: 8px;
width: 15%;
}
tr:nth-child(3) {
border-bottom: 2px solid white;
}
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet" type="text/css">
<table>
<caption>TableCaption</caption>
<tr>
<th>TableHeader</th>
<th>TableHeader</th>
<th>TableHeader</th>
<th>TableHeader</th>
<th>TableHeader</th>
</tr>
<tr>
<th rowspan="2">SpannedRow1</th>
<td>TableData</td>
<td>TableData</td>
<td>TableData</td>
<td>TableData</td>
</tr>
<tr>
<td>TableData</td>
<td>TableData</td>
<td>TableData</td>
<td>TableData</td>
</tr>
<tr>
<th rowspan="2">SpannedRow1</th>
<td>TableData</td>
<td>TableData</td>
<td>TableData</td>
<td>TableData</td>
</tr>
<tr>
<td>TableData</td>
<td>TableData</td>
<td>TableData</td>
<td>TableData</td>
</tr>
</table>
Hoping can help you
tbody tr:nth-child(2n) {
border-bottom: 2px solid red;
}
Related
I just can't figure how to align the text in the header on the left together with the text in body header. The table is a scrollable table.
.container {
padding-left:260px;
table-layout: fixed;
text-align: left;
}
.tableheader{
background-color: rgba(255, 255, 255, 0.3);
width: 1000px;
}
.tablecontent{
height: 100px;
width: 1000px;
overflow-x: auto;
margin-top: 0px;
border: 1px solid rgba(255,255,255,0.3);
}
th{
font-weight: 500;
font-size: 12px;
color: rgb(68, 68, 68);
text-transform: uppercase;
padding: 20px;
width: 100px;
}
td{
padding: 15px;
width: 100px;
vertical-align:middle;
font-weight: 300;
font-size: 12px;
color: rgb(59, 59, 59);
border-bottom: solid 1px rgba(255,255,255,0.1);
}
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
<section class="container">
<div class="tableheader" >
<table cellpadding="0" cellspacing="0" border="0">
<thead>
<tr>
<th>Username</th>
<th>Name</th>
<th>Position</th>
<th>Status</th>
<th>Time</th>
<th>Date</th>
</tr>
</thead>
</table>
</div>
<div class="tablecontent">
<table cellpadding="0" cellspacing="0" border="0">
<tbody class="tablecontent">
<?php echo $stafftable?>
</tbody>
</table>
</div>
</section>
As you can see the table header text alignment is different from table body alignment. I can't seem to find what is the problem. I have tried editing the padding and the width of th and tr.
It is beacause you have set the different padding of th and td.
try this:
.container {
padding-left:260px;
table-layout: fixed;
text-align: left;
}
.tableheader{
background-color: rgba(255, 255, 255, 0.3);
width: 1000px;
}
.tablecontent{
height: 100px;
width: 1000px;
overflow-x: auto;
margin-top: 0px;
border: 1px solid rgba(255,255,255,0.3);
}
th{
font-weight: 500;
font-size: 12px;
color: rgb(68, 68, 68);
text-transform: uppercase;
padding: 15px;
width: 100px;
}
td{
padding: 15px;
width: 100px;
vertical-align:middle;
font-weight: 300;
font-size: 12px;
color: rgb(59, 59, 59);
border-bottom: solid 1px rgba(255,255,255,0.1);
}
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
<section class="container">
<div class="tableheader" >
<table cellpadding="0" cellspacing="0" border="0">
<thead>
<tr>
<th align="left">Username</th>
<th>Name</th>
<th>Position</th>
<th>Status</th>
<th>Time</th>
<th>Date</th>
</tr>
</thead>
</table>
</div>
<div class="tablecontent">
<table cellpadding="0" cellspacing="0" border="0">
<tbody class="tablecontent">
<tr>
<td>Username</td>
<td>Name</td>
<td>Position</td>
<td>Status</td>
<td>Time</td>
<td>Date</td>
</tr>
</tbody>
</table>
</div>
</section>
Adjust your td padding property to match this of the th. In your example, td had padding 15px and th had 20px. It's responsible for the left indentation, so adjust it to be the same. In my example below it is set to 20px. Consider doing it in one place, like
td, th { padding: 20px; }
Working example:
.container {
padding-left:260px;
table-layout: fixed;
text-align: left;
}
.tableheader{
background-color: rgba(255, 255, 255, 0.3);
width: 1000px;
}
.tablecontent{
height: 100px;
width: 1000px;
overflow-x: auto;
margin-top: 0px;
border: 1px solid rgba(255,255,255,0.3);
}
th{
font-weight: 500;
font-size: 12px;
color: rgb(68, 68, 68);
text-transform: uppercase;
padding: 20px;
width: 100px;
}
td{
padding: 20px; /* CHANGED FROM 15PX TO 20PX */
width: 100px;
vertical-align:middle;
font-weight: 300;
font-size: 12px;
color: rgb(59, 59, 59);
border-bottom: solid 1px rgba(255,255,255,0.1);
}
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
<section class="container">
<div class="tableheader" >
<table cellpadding="0" cellspacing="0" border="0">
<thead>
<tr>
<th>Username</th>
<th>Name</th>
<th>Position</th>
<th>Status</th>
<th>Time</th>
<th>Date</th>
</tr>
</thead>
</table>
</div>
<div class="tablecontent">
<table cellpadding="0" cellspacing="0" border="0">
<tbody class="tablecontent">
<tr>
<td>Username</td>
<td>Name</td>
<td>Position</td>
<td>Status</td>
<td>Time</td>
<td>Date</td>
</tr>
<tr>
<td>Username</td>
<td>Name</td>
<td>Position</td>
<td>Status</td>
<td>Time</td>
<td>Date</td>
</tr>
<tr>
<td>Username</td>
<td>Name</td>
<td>Position</td>
<td>Status</td>
<td>Time</td>
<td>Date</td>
</tr>
<tr>
<td>Username</td>
<td>Name</td>
<td>Position</td>
<td>Status</td>
<td>Time</td>
<td>Date</td>
</tr>
</tbody>
</table>
</div>
</section>
I am looking to apply a shadow only to the line that goes between the table rows. In the sample below the "red" lines. I don't want the shadow to be applied to the blue borders.
If anyone can fiddle the below snippet to get it to work they would be my hero of the day.
EDIT: I see my snippet has the pointed red line problem. Ideally I actually want a solid non divided red line.
This is the sort of effect I'm looking for:
.shadow {
margin: 20px;
width: 80%;
background: yellow;
border-radius: 15px;
border: 2px solid blue;
}
.shadow td, .shadow th {
border-top: 5px solid red;
border-right: 2px solid blue;
padding: 10px;
text-align: center;
}
.shadow th {
border-top: none;
}
.shadow td:last-child, .shadow th:last-child {
border-right: none;
}
<div>
<table class="shadow">
<tr>
<th>AH</th>
<th>BH</th>
<th>CH</th>
</tr>
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
<td>C3</td>
</tr>
</table>
</div>
It seems to me the following snippet will solve your problem. Let me know if something is not good or you need something explained. Basically I added the box shadow to all td's and th's, and then I just removed them from the last row using the :last-child selector
EDIT: As suggested in the comments, I have updated the adding only
.shadow tr:not(:last-child) td, .shadow th{
box-shadow: 0px 10px 5px rgba(0,0,0,0.6);
}
which does the trick as well
.shadow {
margin: 20px;
width: 80%;
background: yellow;
border-radius: 15px;
border: 2px solid blue;
}
.shadow td, .shadow th{
border-top: 5px solid red;
border-right: 2px solid blue;
padding: 10px;
text-align: center;
}
.shadow tr:not(:last-child) td, .shadow th{
box-shadow: 0px 10px 5px rgba(0,0,0,0.6);
}
.shadow th {
border-top: none;
}
.shadow td:last-child, .shadow th:last-child {
border-right: none;
}
<div>
<table class="shadow">
<tr>
<th>AH</th>
<th>BH</th>
<th>CH</th>
</tr>
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
<td>C3</td>
</tr>
</table>
</div>
Here is my contribution, hope it helps. :)
.table {
margin: 20px;
width: 80%;
background: yellow;
border-radius: 15px;
border: 2px solid blue;
border-spacing: 0px;
}
.table tr {
box-shadow: 0 3px 4px -1px rgba(0,0,0,0.65);
}
.table th, .table td {
padding: 10px;
text-align: center;
border-bottom: 4px solid red;
border-right:2px solid blue;
}
.table tr:last-child td {
border-bottom: none;
}
.table tr td:last-child,
.table tr th:last-child{
border-right: none;
}
.table tr:last-child {
box-shadow: none;
}
<div>
<table class="table">
<tr>
<th>AH</th>
<th>BH</th>
<th>CH</th>
</tr>
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
<td>C3</td>
</tr>
</table>
</div>
You could make it with :after pseudo-element and position: absolute:
.shadow {
margin: 20px;
width: 80%;
background: yellow;
border-radius: 15px;
border: 2px solid blue;
}
.shadow td, .shadow th {
border-top: 5px solid red;
border-right: 2px solid blue;
padding: 10px;
text-align: center;
position: relative;
}
.shadow th {
border-top: none;
}
.shadow td:last-child, .shadow th:last-child {
border-right: none;
}
.shadow td:after, .shadow th:after {
content: '';
display: block;
box-shadow: black 1px 3px 3px;
height: 2px;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
}
.shadow tr:last-child td:after, .shadow tr:last-child th:after {
display: none;
}
<div>
<table class="shadow">
<tr>
<th>AH</th>
<th>BH</th>
<th>CH</th>
</tr>
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
<td>C3</td>
</tr>
</table>
</div>
I need a row should be of rounded corners and a spacing between row-row.So,far I tried table table-curved class as below.
Any suggestions/modifications would be helpful.
My CSS -
.table-curved {
border-collapse: separate;
}
.table-curved {
border: solid #ccc 1px;
border-radius: 6px;
border-left:0px;
}
.table-curved tr {
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
border-radius: 26px;
border-collapse:seperate;
border-spacing:5em;
}
.table-curved th {
border-top: none;
}
.table-curved th:first-child {
border-radius: 6px 0 0 0;
}
.table-curved th:last-child {
border-radius: 0 6px 0 0;
}
.table-curved th:only-child{
border-radius: 6px 6px 0 0;
}
.table-curved tr:last-child td:first-child {
border-radius: 0 0 0 6px;
}
.table-curved tr:last-child td:last-child {
border-radius: 0 0 6px 0;
}
My HTML -
<table class="table table-curved">
<thead>
<tr>
<th>Schedule Time</th>
<th>First Name</th>
<th>Last Name</th>
<th>Telephone</th>
<th>Status</th>
<th>Contact Score</th>
<th>Last Contacted</th>
<th>Device Type</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
To be more specific I need a row looks similar to image here
you can use :before in first column:
Here i created a example for you:
.table-curved {
border-collapse: separate;
width:100%;
border-spacing:0px;
}
.table-curved {
border: solid #ccc 1px;
border-radius: 6px;
border-left:0px;
}
.table-curved tr {
position: relative;
border-radius: 26px;
border-collapse:seperate;
border-spacing:0;
background:#f8f8f8;
backgrnoud-position-x: 10px;
padding:10px 0;
transition:background .1s;
}
.table-curved tr:hover {
background:#eee;
}
.table-curved th {
border-top: none;
}
.table-curved th:first-child {
border-radius: 6px 0 0 0;
}
.table-curved th:last-child {
border-radius: 0 6px 0 0;
}
.table-curved th:only-child{
border-radius: 6px 6px 0 0;
}
.table-curved tr:last-child td:first-child {
border-radius: 0 0 0 6px;
}
.table-curved tr:last-child td:last-child {
border-radius: 0 0 6px 0;
}
.table-curved td:first-child:before {
content: "";
display: block;
width: 10px;
height: 100%;
left: 0;
top: 0;
border-radius: 6px 0 0 6px;
position: absolute;
}
.table-curved td.red:before {
background:red;
}
.table-curved td.green:before {
background:green;
}
.table-curved td.blue:before {
background:blue;
}
.table-curved td.orange:before {
background:orange;
}
.table-curved td:first-child{
padding-left: 15px;
}
.table-curved td{
position: relative;
border-bottom: 10px solid white;
border-spacing: 0px;
padding: 10px;
}
You can try border-radius on td and th. Check below example to get started.
Adjust the border-radius as required.
Add class to tr to have desired background-color
Approach 1: A solution using pseudo element :before
.table-curved {
border-collapse: collapse;
margin-left: 10px;
}
.table-curved th {
padding: 3px 10px;
}
.table-curved td {
position: relative;
background-color: #e5e5e5;
padding: 6px 10px;
border-bottom: 2px solid white;
border-top: 2px solid white;
}
.table-curved td:first-child:before {
content: '';
position: absolute;
border-radius: 8px 0 0 8px;
background-color: coral;
width: 12px;
height: 100%;
left: -12px;
top: 0px;
}
.table-curved td:last-child {
border-radius: 0 5px 5px 0;
}
.table-curved tr:hover td {
background-color: #c5c5c5;
}
.table-curved tr.blue td:first-child:before {
background-color: cornflowerblue;
}
.table-curved tr.green td:first-child:before {
background-color: forestgreen;
}
<table class="table table-curved">
<thead>
<tr>
<th>Schedule Time</th>
<th>First Name</th>
<th>Last Name</th>
<th>Telephone</th>
<th>Status</th>
<th>Contact Score</th>
<th>Last Contacted</th>
<th>Device Type</th>
</tr>
</thead>
<tbody>
<tr class="green">
<td>.</td>
<td>.</td>
<td>.</td>
<td>.</td>
<td>.</td>
<td>.</td>
<td>.</td>
<td>.</td>
</tr>
<tr>
<td>.</td>
<td>.</td>
<td>.</td>
<td>.</td>
<td>.</td>
<td>.</td>
<td>.</td>
<td>.</td>
</tr>
<tr class="blue">
<td>.</td>
<td>.</td>
<td>.</td>
<td>.</td>
<td>.</td>
<td>.</td>
<td>.</td>
<td>.</td>
</tr>
</tbody>
</table>
Approach 2: A solution with adding extra/empty cell in each row.
.table-curved {
border-collapse: collapse;
}
.table-curved th {
padding: 3px 10px;
}
.table-curved th:first-child {
padding: 6px;
}
.table-curved td {
background-color: #e5e5e5;
padding: 6px 10px;
border-bottom: 2px solid white;
border-top: 2px solid white;
}
.table-curved td:first-child {
padding: 6px;
border-radius: 8px 0 0 8px;
background-color: coral;
}
.table-curved td:last-child {
border-radius: 0 5px 5px 0;
}
.table-curved tr:hover td:not(:first-child) {
background-color: #c5c5c5;
}
.table-curved tr.blue td:first-child {
background-color: cornflowerblue;
}
.table-curved tr.green td:first-child {
background-color: forestgreen;
}
<table class="table table-curved">
<tr>
<th></th>
<th>S.No</th>
<th>Title</th>
<th>Cost</th>
</tr>
<tr class="blue">
<td></td>
<td>1</td>
<td>Title one</td>
<td>$18.0</td>
</tr>
<tr>
<td></td>
<td>2</td>
<td>Title two</td>
<td>$23.4</td>
</tr>
<tr class="green">
<td></td>
<td>3</td>
<td>Title three</td>
<td>$40.5</td>
</tr>
</table>
You cannot apply border radius to table row, instead you can add border-radius to TD, here is example
'http://jsfiddle.net/theazureshadow/LRKXD/1/'
Is it posible to do a full pagination table without javascript or jquery?
Actually i have this table:
<div class="datagrid">
<table>
<thead>
<tr><th>Header</th><th>Header</th><th>Header</th><th>Header</th><th>Header</th><th>Header</th><th>Header</th><th>Header</th><th>Header</th><th>Header</th></tr>
</thead>
<tfoot>
<tr>
<td colspan="10">
<div id="paging">
<ul>
<li><span>Previous</span></li>
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
<li><span>Next</span></li>
</ul>
</div>
</tr>
</tfoot>
<tbody>
<tr>
<td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td>
</tr>
<tr class="alt">
<td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td>
</tr>
<tr>
<td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td>
</tr>
<tr class="alt">
<td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td>
</tr>
<tr>
<td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td>
</tr>
<tr class="alt">
<td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td>
</tr>
<tr>
<td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td>
</tr>
<tr class="alt">
<td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td>
</tr>
<tr>
<td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td>
</tr>
<tr class="alt">
<td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td>
</tr>
</tbody>
</table>
</div>
With this CSS which was made with a random generator:
.datagrid table { border-collapse: collapse; text-align: left; width: 100%; }
.datagrid {font: normal 12px/150% Arial, Helvetica, sans-serif; background: #fff; overflow: hidden; border: 1px solid #000000; -webkit-border-radius: 11px; -moz-border-radius: 11px; border-radius: 11px; }
.datagrid table td,
.datagrid table th { padding: 7px 9px; }
.datagrid table thead th {background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #808080), color-stop(1, #080808) );background:-moz-linear-gradient( center top, #808080 5%, #080808 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#808080', endColorstr='#080808');background-color:#808080; color:#00C2D0; font-size: 13px; font-weight: bold; border-left: 1px solid #000000; }
.datagrid table thead th:first-child { border: none; }
.datagrid table tbody td { color: #00496B; border-left: 1px solid #000000;font-size: 13px;font-weight: normal; }
.datagrid table tbody .alt td { background: #E0E0E0; color: #000000; }
.datagrid table tbody tr:hover td{color: #339; background: #ABECF0;}
.datagrid table tbody td:first-child { border-left: none; }
.datagrid table tbody tr:last-child td { border-bottom: none; }
.datagrid table tfoot td div { border-top: 1px solid #000000;background: #646464;}
.datagrid table tfoot td { padding: 0; font-size: 15px }
.datagrid table tfoot td div{ padding: 6px; }
.datagrid table tfoot td ul { margin: 0; padding:0; list-style: none; text-align: right; }
.datagrid table tfoot li { display: inline; }
.datagrid table tfoot li a { text-decoration: none; display: inline-block; padding: 2px 8px; margin: 1px;color: #00C2D0;border: 1px solid #006699;-webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #808080), color-stop(1, #080808) );background:-moz-linear-gradient( center top, #808080 5%, #080808 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#808080', endColorstr='#080808');background-color:#808080; }
.datagrid table tfoot ul.active, /* Probably here is the magic */
.datagrid table tfoot ul a:hover { text-decoration: none;border-color: #00C2D0; color: #FFFFFF; background: none; background-color:#000000;}
Question
How can i make it work to show just 5 rows with css?
Thanks in Advance
You can use like this
tr:nth-child(5) ~ tr{
display: none;
}
demo
I have a table with headers and each header contains a span which have a background image that i use as a sperator between the th.
On all browsers it display as it should but on IE7 the seperator image (which is a span with background)
is showing on the bottom.
Good (IE8+,Chrome,FF):
Bad (IE7):
HTML:
<div class="tableWrapper">
<table>
<thead>
<tr>
<th class="sortable top-left-round">Lead Id<span></span></th>
<th class="sortable">Create Date<span></span></th>
<th class="sortable">Target Group<span></span></th>
<th class="sortable">Activity<span></span></th>
<th class="sortable">Type<span></span></th>
<th class="sortable">Last Update<span></span></th>
<th class="sortable">Close Date<span></span></th>
<th class="action_header_short top-right-round"><span>View</span></th>
</tr>
</thead>
<tbody>
<tr class="first">
<td>1</td>
<td class="col_name" title="Jackson">10/12/2011</td>
<td title="Jackson">Jackson</td>
<td title="Jackson">Jackson </td>
<td title="Jackson">Jackson</td>
<td title="Jackson">10/12/2011</td>
<td title="Jackson">10/12/2011</td>
<td class="action"></td>
</tr>
<tr>
<td>1</td>
<td class="col_name" title="Jackson">10/12/2011</td>
<td title="Jackson">Jackson</td>
<td title="Jackson">Jackson </td>
<td title="Jackson">Jackson</td>
<td title="Jackson">10/12/2011</td>
<td title="Jackson">10/12/2011</td>
<td class="action"></td>
</tr>
</tbody>
</table>
</div>
<!-- end .tableWrapper -->
CSS:
table{
width: 890px;
margin-left: 25px;
border-collapse:collapse;
}
td{
border: 1px solid #99a3a7;
}
.top-left-round{
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 5px 0px 0px 0px;
border-radius: 5px 0px 0px 0px;
}
.top-right-round{
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 0px 5px 0px 0px;
border-radius: 0px 5px 0px 0px;
}
table thead th{
background: url(../images/table-header-bg.png) repeat-x;
height: 42px;
line-height: 40px;
border: 0px solid transparent;
font-weight:normal;
}
th.action_header span {
margin-right:50px;
}
th.action_header {
width: 120px;
text-align: left;
padding-left: 20px
}
th.action_header_short{
padding-left: 20px;
}
th a.sortable,th.action_header span,th.action_header_short span {
color: #fff;
font-size: 15px;
font-weight: normal;
text-decoration: none;
}
th a.sortable{
padding: 0 15px;
background: url(../images/icons/arrow_dwn.png) right center no-repeat;
}
th.sortable span{
background: url(../images/cols-seperator.png) right top no-repeat;
float:right;
margin-right: -2px;
width:5px;
height: 42px;
}
th a:hover{
color: #fff;
}
tbody td{
padding: 0 5px;
}
td.action{
width:74px;
padding: 2px;
}
.tableWrapper{
border-bottom: 1px solid #E5E5E5;
padding-bottom: 8px;
}
Style this with CSS instead of an image. You're always going to have issues using an image like this.