i don't understand why border of first tbody tr's td is not visible.
i think there is no reason border is not visible.
what i fugure out is this.
if natural height of th is higher than height i fixed for th, first tbody tr's td is visible.
if there is no code th{height: xxpx; }, first tbody tr's td is visible.
.table {
border-spacing: 0;
border-collapse: collapse;
}
.table.summary-style
{
font-size: 11px;
width: 100%;
table-layout: fixed;
text-align: center;
color: #666;
border-bottom: 1px solid #666;
background: #fff;
}
.table.summary-style caption
{
font-size: 0;
line-height: 0;
display: none;
overflow: hidden;
clip: rect(1px 1px 1px 1px);
/* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
width: 0;
height: 0;
margin: 0;
padding: 0;
opacity: 0;
}
.table.summary-style thead th
{
font-size: 16px;
line-height: 1;
position: relative;
box-sizing: border-box;
height: 38px;
padding: 5px 4px;
text-align: center;
vertical-align: middle;
color: #666;
background: #ddd;
}
.table.summary-style > tbody > tr > td
{
font-size: 13px;
line-height: 1.38;
box-sizing: border-box;
height: 36px;
padding: 4px 10px;
text-align: left;
vertical-align: middle;
color: #666;
border-top: 1px solid #666;
background: #fff;
}
<table class="table summary-style">
<thead>
<tr>
<th scope="col">title</th>
<th scope="col">title</th>
<th scope="col">title</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3">No Data.</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
</tbody>
</table>
This is happening because position: relative; on .table.summary-style thead th causes that row of elements to appear 'above' the borders of other elements. This is despite the fact that box-sizing: border-box; has been used, as the borders of the table elements have been collapsed together. The solution is to either remove position: relative; on the first row or remove border-collapse: collapse; from .table.
.table {
border-spacing: 0;
border-collapse: collapse;
}
.table.summary-style
{
font-size: 11px;
width: 100%;
table-layout: fixed;
text-align: center;
color: #666;
border-bottom: 1px solid #666;
background: #fff;
}
.table.summary-style caption
{
font-size: 0;
line-height: 0;
display: none;
overflow: hidden;
clip: rect(1px 1px 1px 1px);
/* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
width: 0;
height: 0;
margin: 0;
padding: 0;
opacity: 0;
}
.table.summary-style thead th
{
font-size: 16px;
line-height: 1;
box-sizing: border-box;
height: 38px;
padding: 5px 4px;
text-align: center;
vertical-align: middle;
color: #666;
background: #ddd;
}
.table.summary-style > tbody > tr > td
{
font-size: 13px;
line-height: 1.38;
box-sizing: border-box;
height: 36px;
padding: 4px 10px;
text-align: left;
vertical-align: middle;
color: #666;
border-top: 1px solid #666;
background: #fff;
}
<table class="table summary-style">
<thead>
<tr>
<th scope="col">title</th>
<th scope="col">title</th>
<th scope="col">title</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3">No Data.</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
</tbody>
</table>
Try:
table,
td,
th {
border-collapse: collapse;
padding: 0.5em 1em;
border: 2px solid black;
}
.table.summary-style {
font-size: 11px;
width: 100%;
table-layout: fixed;
text-align: center;
color: #666;
border-bottom: 1px solid #666;
background: #fff;
}
.table.summary-style caption {
font-size: 0;
line-height: 0;
display: none;
overflow: hidden;
clip: rect(1px 1px 1px 1px);
/* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
width: 0;
height: 0;
margin: 0;
padding: 0;
opacity: 0;
}
.table.summary-style thead th {
font-size: 16px;
line-height: 1;
position: relative;
box-sizing: border-box;
height: 38px;
padding: 5px 4px;
text-align: center;
vertical-align: middle;
color: #666;
background: #ddd;
}
.table.summary-style>tbody>tr>td {
font-size: 13px;
line-height: 1.38;
box-sizing: border-box;
height: 36px;
padding: 4px 10px;
text-align: left;
vertical-align: middle;
color: #666;
border-top: 1px solid #666;
background: #fff;
}
<table class="table summary-style">
<thead>
<tr>
<th scope="col">title</th>
<th scope="col">title</th>
<th scope="col">title</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3">No Data.</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
</tbody>
</table>
Related
I am having trouble making tbody border not extending over the width of thead. Is there a way to fix it? Thanks
PS: There are other problems like the empty ".cell" div not sizing properly, however I'm not sure if you can post multi-issue questions. So let's focus on the issue above.
table {
box-sizing: border-box;
border-collapse: collapse;
margin-bottom: 2000px;
}
th {
background-color: white;
position: sticky;
top: 0;
padding: 0;
border: 0;
}
.cell {
box-sizing: border-box;
display: inline-block;
height: 100%;
width: 100%;
padding: 15px;
background-color: red;
}
th:first-of-type > .cell {
border-radius: 5px 0 0 0;
}
th:last-of-type > .cell {
border-radius: 0 5px 0 0;
}
td {
border: 1px solid blue;
background-color: #fff;
padding: 15px;
}
tbody {
border: 2px solid green;
box-sizing: border-box;
}
<table>
<thead>
<tr>
<th><div class="cell"></div></th>
<th><div class="cell">aaaaaa</div></th>
<th><div class="cell">aaaa</div></th>
</tr>
</thead>
<tbody>
<tr>
<td>aaa</td>
<td>aaaaaa</td>
<td>aaaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaaaaa</td>
<td>aaaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaaaaa</td>
<td>aaaa</td>
</tr>
</tbody>
</table>
I'm assuming the rounded corners are the reason why you are placing <div> within the <th>. If you want rounded corners then you need to use the following styles:
table { border-collapse:separate; border-spacing:0; border: 0; }
The demo has some additional changes that can be adjusted.
Demo
table {
border-collapse: separate;
border-spacing: 0;
margin-bottom: 2000px;
border: 0;
}
thead {
position: sticky;
top: 0;
}
th {
border: 1px solid red;
background-color: red;
padding:15px;
}
th:first-of-type {
border-top-left-radius: 6px;
}
th:last-of-type {
border-top-right-radius: 6px;
}
td {
border: 1px solid blue;
background-color: #fff;
padding: 15px;
}
<table>
<thead>
<tr>
<th></th>
<th>aaaaaa</th>
<th>aaaa</th>
</tr>
</thead>
<tbody>
<tr>
<td>aaa</td>
<td>aaaaaa</td>
<td>aaaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaaaaa</td>
<td>aaaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaaaaa</td>
<td>aaaa</td>
</tr>
</tbody>
</table>
I have a table with a first and a last row with background-color which I would like to have a space with their previous rows.
This is my code:
table {
border-collapse: collapse;
}
thead > tr > th {
font-size: 14px;
color: blue;
height: 44px;
vertical-align: middle;
text-align: left;
padding: 0 10px;
text-align: center;
border: none;
border-bottom: 1px solid blue;
position: relative;
}
thead > tr > th:after {
content: "";
position: absolute;
left: 100%;
top: 8px;
bottom: 8px;
width: 1px;
border-left: 1px dashed blue;
}
thead > tr > th:last-child::after {
border-left: none;
}
tbody > tr:first-child, tbody > tr:last-child {
background-color: gray;
}
tbody > tr:first-child > td, tbody > tr:last-child > td {
border-bottom: none;
color: black;
}
tbody > tr > td {
font-size: 12px;
line-height: 14px;
color: gray;
height: 44px;
vertical-align: middle;
padding: 8px 10px;
border: none;
border-bottom: 1px dashed gray;
position: relative;
}
tbody > tr > td:first-child {
color: black;
}
tbody > tr > td::after {
content: "";
position: absolute;
left: 100%;
top: 8px;
bottom: 8px;
width: 1px;
border-left: 1px dashed gray;
}
tbody > tr > td:last-child::after {
border-left: none;
}
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>6546</td>
<td>5654</td>
<td>6454</td>
</tr>
<tr>
<td>6546</td>
<td>5654</td>
<td>6454</td>
</tr>
<tr>
<td>6546</td>
<td>5654</td>
<td>6454</td>
</tr>
<tr>
<td>6546</td>
<td>5654</td>
<td>6454</td>
</tr>
</tbody>
</table>
So I would like to have a white space between the blue border-bottom of the thead and the first gray row. Also between the last gray row and the previous dashed gray border-bottom. How can I do that?
Hope this helps
change border-collapse: collapse; to border-collapse: separate; and add border-spacing 0 border-spacing.Then apply border-top: 4px solid #fff; for tbody > tr:first-child > td, tbody > tr:last-child > td.
table {
border-collapse: separate;
border-spacing: 0px;
}
tbody > tr:first-child > td, tbody > tr:last-child > td {
border-bottom: none;
color: black;
border-top: 4px solid #fff;
}
table {
border-collapse: separate;
border-spacing: 0px;/* horizontal <length> | vertical <length> */
}
thead > tr > th {
font-size: 14px;
color: blue;
height: 44px;
vertical-align: middle;
text-align: left;
padding: 0 10px;
text-align: center;
border: none;
border-bottom: 1px solid blue;
position: relative;
}
thead > tr > th:after {
content: "";
position: absolute;
left: 100%;
top: 8px;
bottom: 8px;
width: 1px;
border-left: 1px dashed blue;
}
thead > tr > th:last-child::after {
border-left: none;
}
tbody > tr:first-child, tbody > tr:last-child {
background-color: gray;
}
tbody > tr:first-child > td, tbody > tr:last-child > td {
border-bottom: none;
color: black;
border-top: 4px solid #fff;
}
tbody > tr > td {
font-size: 12px;
line-height: 14px;
color: gray;
height: 44px;
vertical-align: middle;
padding: 8px 10px;
border: none;
border-bottom: 1px dashed gray;
position: relative;
}
tbody > tr > td:first-child {
color: black;
}
tbody > tr > td::after {
content: "";
position: absolute;
left: 100%;
top: 8px;
bottom: 8px;
width: 1px;
border-left: 1px dashed gray;
}
tbody > tr > td:last-child::after {
border-left: none;
}
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>6546</td>
<td>5654</td>
<td>6454</td>
</tr>
<tr>
<td>6546</td>
<td>5654</td>
<td>6454</td>
</tr>
<tr>
<td>6546</td>
<td>5654</td>
<td>6454</td>
</tr>
<tr>
<td>6546</td>
<td>5654</td>
<td>6454</td>
</tr>
</tbody>
</table>
Refer this link Spacing between thead and tbody
tbody:before {
content: "-";
display: block;
line-height: 1em;
color: transparent;
}
The border-radius at table work only on background and border remain straight.
This is my css
.table_mem, .th_mem, .tr_mem, .td_mem{
border: 1px solid #000000;
border-radius: 20px;
border-collapse: collapse;
text-align: center;
padding: 7px;
}
.th_mem{ background-color: #9e9e9e;}
.tr_mem{ background-color: #e5e5e5; transition: .5s;}
.tr_mem:hover{ background-color: #bfbfbf; }
Someone can say me a solution?
The borders are straight because of collapsing, simple set border-collapse to separate:
body { padding-top: 1em; }
.table_mem,
.table_mem thead th,
.table_mem tbody tr,
.table_mem tbody td {
border: 1px solid #000000 !important;
border-radius: 20px;
border-collapse: separate;
text-align: center;
padding: 7px;
}
.table_mem thead th {
background-color: #9e9e9e;
}
.table_mem tbody tr {
background-color: #e5e5e5;
transition: .5s;
}
.table_mem tbody tr:hover {
background-color: #bfbfbf;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<table class="table table_mem">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>
jsfiddle: https://jsfiddle.net/azizn/kkv9guhx/
I have a table where I'd like the row/table head to be red, but with a slightly rounded corner to be smoother than a straight edge, but I also need to space the width between the heading or the radius would be pointless. Only option I can think of is creating an empty th for a divider. But would prefer a CSS fix.
Code
.restaurant {
width: 80%;
background-color: #FFFFFF;
color: #000000;
border: 1px solid #FFFFFF;
z-index: -1;
}
.restaurant tr {
width: 100%;
background-color: #FFFFFF;
border: 1px solid #FFFFFF;
border-spacing: 5px;
z-index: -1;
}
.restaurant td {
height: 100%;
background-color: #FFFFFF;
color: #000000;
border: 1px solid #FFFFFF;
z-index: -1;
}
.restaurant th {
line-height: 15px;
background-color: #DE0000;
color: #FFFFFF;
border: 5px solid #FFFFFF
border-spacing: 10px;
border-radius: 4px;
}
html
<table class="restaurant">
<tr>
<td colspan="2">
<table class="restaurant-corners">
<tr>
<td width="10%">
<img src="/css/images/menu-corner-top-left.png" class="corners">
</td>
<td width="80%">
</td>
<td width="10%">
<img src="/css/images/menu-corner-top-right.png" class="corners" align="right">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<table class="restaurant-logo" cellspacing="0">
<tr>
<td colspan="3">
<center><img src="/css/uncletoms.png"></center>
</td>
</tr>
<tr>
<th width="80%">
<h2>Breakfast</h2>
</th>
<th width="20%">
<h2>Drinks</h2>
</th>
</tr>
</table>
Probably more information there then needed. But I wanted to make sure I didn't missing anything.
When designing a table with rounded corners, do not use border-collapse: collapse. OP's request for row to be red is vague...Red borders? Text? Background?...Need specifics. We will apply border-radius to the table's border and to the first and last <th> borders. See the comments in the Snippet:
section {
padding: 20px 10px;
width: 100%;
height: auto;
border-bottom: 3px ridge #FF6;
margin: 0 5px 20px;
}
table.x {
position: relative;
padding: 0;
box-shadow: 0 1px 9px 1px #ccc;
/* This will round the outside border on all 4 corners */
/* If you want only the head to have rounded corners uncomment *1* ruleset and remove or comment *2*/
/* border-top-left-radius: 6px;
border-top-right-radius: 6px;
*/
border-radius: 6px;
margin: 20px auto;
table-layout: fixed;
width: 50%;
height: 100%;
max-height: 550px;
}
.x th {
color: #FFF;
background: #2C7EDB;
padding: 10px;
text-align: center;
vertical-align: middle;
}
.x tr:nth-child(odd) {
background-color: #333;
color: #FFF;
}
.x tr:nth-child(even) {
background-color: #D3E9FF;
color: #333;
}
.x td {
border-style: solid;
border-width: 1px;
border-color: #264D73;
padding: 5px;
text-align: left;
vertical-align: top;
position: relative;
}
/* Next 2 rulesets are used to create rounded corners to the inner borders of the head */
/* Remove or comment the last 2 rulesets if you don't want the bottom corners rounded */
.x thead th:first-child {
border-top-left-radius: 6px;
}
.x thead th:last-child {
border-top-right-radius: 6px;
}
.x tbody tr:last-child td:first-child {
border-bottom-left-radius: 6px;
}
.x tbody tr:last-child td:last-child {
border-bottom-right-radius: 6px;
}
<section>
<table class="x">
<caption>table.x</caption>
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
</tbody>
</table>
</section>
I am trying to have a image, dynamically, overlay a table, that is opacity half filled so it is a little transparent, but I cannot even get the image to display over the color of the cells... I'm trying to do that first, then I'll add the code to the opacity.
Can you please tell me what I did wrong?
The CSS is in a file, but this is for an invoice, I want to overlay an image that shows paid, refunded, voided, pending, etc.
Here is the short CSS for this invoice:
.clearfix:after {
content: "";
display: table;
clear: both;
}
a {
color: #5D6975;
text-decoration: underline;
}
.fbody {
position: relative;
width: 21cm;
height: 29.7cm;
margin: 0 auto;
color: #001028;
background: #FFFFFF;
font-family: Arial, sans-serif;
font-size: 12px;
font-family: Arial;
border-style: solid;
border-width: 1px;
border-color: #001028;
}
header {
padding: 10px 0;
margin-bottom: 30px;
}
div.logo {
text-align: center;
}
//.logo img {
// width: 90px;
//}
.th1 {
border-top: 1px solid #5D6975;
border-bottom: 1px solid #5D6975;
color: #5D6975;
font-size: 2.4em;
line-height: 1.4em;
font-weight: normal;
text-align: center;
margin: 0 0 20px 0;
background: url('/images/2.0/dimension.png');
}
#project {
float: left;
margin-left: 20px;
}
#project span {
color: #5D6975;
text-align: left;
width: 52px;
margin-left: 20px;
display: inline-block;
font-size: 1em;
}
#tcompany {
margin-right: 20px;
float: right;
text-align: right;
}
#tcompany span {
color: #5D6975;
text-align: right;
width: 52px;
margin-right: 30px;
display: inline-block;
font-size: 1em;
}
#project div,
#tcompany div {
white-space: nowrap;
}
.ttable {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
margin-bottom: 20px;
}
.ttable tr:nth-child(2n-1) td {
background: #F5F5F5;
color: #000000;
z-index: -1;
}
.ttable th,
.ttable td {
text-align: center;
color: #000000;
}
.ttable th {
padding: 5px 20px;
color: #000000;
border-bottom: 1px solid #C1CED9;
white-space: nowrap;
font-weight: normal;
}
.ttable .service,
.ttable .desc {
text-align: left;
}
.ttable td {
padding: 10px;
text-align: right;
color: #000000;
}
.ttable td.service,
.ttable td.desc {
vertical-align: top;
color: #000000;
}
.ttable td.unit,
.ttable td.qty,
.ttable td.total {
font-size: 1.2em;
color: #000000;
}
.ttable td.grand {
border-top: 1px solid #5D6975;
color: #000000;
}
// Shipment section
#toptable #billto {
padding-left: 10px;
margin-left: 10px;
margin-top: 0px;
padding-top: 0px;
vertical-align: top;
color: #000000;
}
#toptable #shipto {
padding-left: 10px;
margin-right: 10px;
margin-left: 10px;
padding-right: 10px;
padding-top: 0px;
margin-top: 0px;
vertical-align: top;
color: #000000;
}
#toptable .stable {
text-align: center;
padding: 0px;
color: #000000;
}
#toptable .stable2 {
text-align: center;
padding: 0px;
background: #EAFFEA;
color: #000000;
}
#toptable .stableheader {
font-weight: bold;
border-bottom: 1px; solid #5D6975;
background: #C0C0C0;
color: #000000;
text-align: center;
font-size: 1.3em;
height: 10px;
padding-top: 5px;
padding-bottom: 5px;
}
#notices .noticeheader {
color: #5D6975;
font-size: 1.5em;
margin-left: 20px;
}
#notices .notice {
color: #5D6975;
font-size: 1.2em;
margin-left: 20px;
}
footer {
color: #5D6975;
width: 100%;
height: 30px;
position: absolute;
bottom: 0;
border-top: 1px solid #C1CED9;
padding: 8px 0;
text-align: center;
}
Of course the path would require the domain, I took it off though, because it is behind a login page. (Edited, I went and uploaded it to a forum image hosting site)
Here is the HTML that is output by the programming. The Style inside of the table tag is what is built dynamically based upon the status of the invoice.
<table class="ttable" style="background: url('http://s10.postimg.org/d2nvpi7eh/refunded.gif'); z-index: 1; background-repeat: no-repeat; background-position: center;">
<tr>
<th class="service">Item Number</th>
<th class="desc">Product Name</th>
<th>Unit Price</th>
<th>QTY</th>
<th>TOTAL</th>
</tr>
<tbody>
<tr><td class="service">PackageSKU</td> <td class="desc">Item Name / Short Desc</td> <td class="unit">$5.00</td> <td class="qty">1</td> <td class="total">$5.00</td></tr><tr><td class="service"> </td> <td class="desc"> </td> <td class="unit"> </td> <td class="qty"> </td> <td class="total"> </td></tr><tr><td class="service"> </td> <td class="desc"> </td> <td class="unit"> </td> <td class="qty"> </td> <td class="total"> </td></tr>
<tr>
<td colspan="4">SUBTOTAL</td>
<td class="total">$5.00</td>
</tr>
<tr>
<td colspan="4">Shipping and Handling</td>
<td class="total">$1.95</td>
</tr>
<tr>
<td colspan="4">TAX</td>
<td class="total">$0.00</td>
</tr>
<tr>
<td colspan="4" class="grand total">GRAND TOTAL</td>
<td class="grand total">$6.95</td>
</tr>
</tbody>
</table>
See, I tried to use the z-index, but it is not working.
The every other line has the background color in the css file, and it appears over the image.
The lines that do not have a background color, I can see the image, it just is not on top of the color.
Can you see how I need to fix it?
Edited again, I added a jsfiddle: http://jsfiddle.net/bizactuators/je26zszu/
sorry, the other one was not mine, had to register.
Another solution is to use negative z-index to td with background color:
.ttable tr:nth-child(2n-1) td {
background: #F5F5F5;
color: #000000;
position: relative;/*Add position relative*/
z-index: -1;/*Add negative z-index*/
}
.clearfix:after {
content:"";
display: table;
clear: both;
}
a {
color: #5D6975;
text-decoration: underline;
}
.fbody {
position: relative;
width: 21cm;
height: 29.7cm;
margin: 0 auto;
color: #001028;
background: #FFFFFF;
font-family: Arial, sans-serif;
font-size: 12px;
font-family: Arial;
border-style: solid;
border-width: 1px;
border-color: #001028;
}
header {
padding: 10px 0;
margin-bottom: 30px;
}
div.logo {
text-align: center;
}
//.logo img {
// width: 90px;
//
}
.th1 {
border-top: 1px solid #5D6975;
border-bottom: 1px solid #5D6975;
color: #5D6975;
font-size: 2.4em;
line-height: 1.4em;
font-weight: normal;
text-align: center;
margin: 0 0 20px 0;
background: url('/images/2.0/dimension.png');
}
#project {
float: left;
margin-left: 20px;
}
#project span {
color: #5D6975;
text-align: left;
width: 52px;
margin-left: 20px;
display: inline-block;
font-size: 1em;
}
#tcompany {
margin-right: 20px;
float: right;
text-align: right;
}
#tcompany span {
color: #5D6975;
text-align: right;
width: 52px;
margin-right: 30px;
display: inline-block;
font-size: 1em;
}
#project div, #tcompany div {
white-space: nowrap;
}
.ttable {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
margin-bottom: 20px;
}
table.ttable{
background: url('http://s10.postimg.org/d2nvpi7eh/refunded.gif');
z-index: 1;
background-repeat: no-repeat;
background-position: center;
}
.ttable tr:nth-child(2n-1) td {
background: #F5F5F5;
color: #000000;
position: relative;
z-index: -1;
}
.ttable th, .ttable td {
text-align: center;
color: #000000;
}
.ttable th {
padding: 5px 20px;
color: #000000;
border-bottom: 1px solid #C1CED9;
white-space: nowrap;
font-weight: normal;
}
.ttable .service, .ttable .desc {
text-align: left;
}
.ttable td {
padding: 10px;
text-align: right;
color: #000000;
}
.ttable td.service, .ttable td.desc {
vertical-align: top;
color: #000000;
}
.ttable td.unit, .ttable td.qty, .ttable td.total {
font-size: 1.2em;
color: #000000;
}
.ttable td.grand {
border-top: 1px solid #5D6975;
color: #000000;
}
// Shipment section #toptable #billto {
padding-left: 10px;
margin-left: 10px;
margin-top: 0px;
padding-top: 0px;
vertical-align: top;
color: #000000;
}
#toptable #shipto {
padding-left: 10px;
margin-right: 10px;
margin-left: 10px;
padding-right: 10px;
padding-top: 0px;
margin-top: 0px;
vertical-align: top;
color: #000000;
}
#toptable .stable {
text-align: center;
padding: 0px;
color: #000000;
}
#toptable .stable2 {
text-align: center;
padding: 0px;
background: #EAFFEA;
color: #000000;
}
#toptable .stableheader {
font-weight: bold;
border-bottom: 1px;
solid #5D6975;
background: #C0C0C0;
color: #000000;
text-align: center;
font-size: 1.3em;
height: 10px;
padding-top: 5px;
padding-bottom: 5px;
}
#notices .noticeheader {
color: #5D6975;
font-size: 1.5em;
margin-left: 20px;
}
#notices .notice {
color: #5D6975;
font-size: 1.2em;
margin-left: 20px;
}
footer {
color: #5D6975;
width: 100%;
height: 30px;
position: absolute;
bottom: 0;
border-top: 1px solid #C1CED9;
padding: 8px 0;
text-align: center;
}
table.ttable > tr > td{
position: relative;
z-index: -1;
}
<table class="ttable">
<tr>
<th class="service">Item Number</th>
<th class="desc">Product Name</th>
<th>Unit Price</th>
<th>QTY</th>
<th>TOTAL</th>
</tr>
<tbody>
<tr>
<td class="service">PackageSKU</td>
<td class="desc">Item Name / Short Desc</td>
<td class="unit">$5.00</td>
<td class="qty">1</td>
<td class="total">$5.00</td>
</tr>
<tr>
<td class="service"> </td>
<td class="desc"> </td>
<td class="unit"> </td>
<td class="qty"> </td>
<td class="total"> </td>
</tr>
<tr>
<td class="service"> </td>
<td class="desc"> </td>
<td class="unit"> </td>
<td class="qty"> </td>
<td class="total"> </td>
</tr>
<tr>
<td colspan="4">SUBTOTAL</td>
<td class="total">$5.00</td>
</tr>
<tr>
<td colspan="4">Shipping and Handling</td>
<td class="total">$1.95</td>
</tr>
<tr>
<td colspan="4">TAX</td>
<td class="total">$0.00</td>
</tr>
<tr>
<td colspan="4" class="grand total">GRAND TOTAL</td>
<td class="grand total">$6.95</td>
</tr>
</tbody>
</table>
If you want to do that, you'll have to, as you correctly said, create an overlay. Something like this will do:
<div style="position: absolute;">
<div style="width: 100%; height: 100%; background-color: #000; opacity: 0.4; position: absolute; z-index: 10;"></div>
<table>
<thead><tr><th style="background-color: #f00;">Test<th></tr></thead>
<tbody>
<tr><td style="background-color: #f00;">Muh</td></tr>
<tr><td style="background-color: #f00;">Möp</td></tr>
<tr><td style="background-color: #f00;">Mäh</td></tr>
<tr><td style="background-color: #f00;">Muh</td></tr>
<tr><td style="background-color: #f00;">Möp</td></tr>
<tr><td style="background-color: #f00;">Mäh</td></tr>
</tbody>
</table>
</div>
I fix this try
.ttable tr:nth-child(2n-1) td {
background: transparent;
color: #000000;
}
Right?