I have a table which I'm trying to apply a background image but it doesn't show. The image path is right ( firebug says image loaded) and the table size is same as image size (156X46px)
HTML:
<!--hazard icons start here -->
<table class="hazard-table">
<tr>
<td> 1 </td>
<td> 1 </td>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
<td> 1 </td>
<td> 1 </td>
</tr>
<!-- hazard icons end here -->
</table>
CSS:
table.hazard-table {
background:url('../images/icon-item.png') no-repeat;
width:156px;
height:46px;
border-width: 1px;
border-spacing: 2px;
border-style: solid;
border-color:#ebebeb;
border-collapse: collapse;
background-color: white;
}
table.hazard-table th {
border-width: 1px;
padding: 1px;
border-style: inset;
border-color: #ebebeb;
background-color: white;
-moz-border-radius: ;
}
table.hazard-table td {
background-position:30 20 ;
border-width: 1px;
padding: 1px;
border-style: inset;
border-color: #ebebeb;
background-color: white;
-moz-border-radius: ;
}
table.hazard-table {
background:url('../images/icon-item.png') no-repeat;
width:156px;
height:46px;
border-width: 1px;
border-spacing: 2px;
border-style: solid;
border-color:#ebebeb;
border-collapse: collapse;
background-color: white;
}
This :
background-color: white;
override the image with a background of white.
You should do instead :
table.hazard-table {
background:white url('../images/icon-item.png') no-repeat;
width:156px;
height:46px;
border-width: 1px;
border-spacing: 2px;
border-style: solid;
border-color:#ebebeb;
border-collapse: collapse;
}
EDIT :
try this :
table{
.hazard-table {
background:white url("../images/icon-item.png") no-repeat;
width:156px;
height:46px;
border-width: 1px;
border-spacing: 2px;
border-style: solid;
border-color:#ebebeb;
border-collapse: collapse;
th{
border-width: 1px;
padding: 1px;
border-style: inset;
border-color: #ebebeb;
background-color: white;
-moz-border-radius: ;
}
td{
background-position:30 20 ;
border-width: 1px;
padding: 1px;
border-style: inset;
border-color: #ebebeb;
background-color: white;
-moz-border-radius: ;
}
}
}
table.hazard-table td {
background-position:30 20 ;
As a starter, the background-position must be pixels, or "center" etc.
}
table.hazard-table td {
background-position:30px 20px ;
This "might" fix the issue.
Hope this fiddle link will work for you .
table.hazard-table {
/* background:url('../images/icon-item.png') no-repeat 0 0;*/
background:url('http://img.talkandroid.com/uploads/2013/03/wpid-photo-jan-14-2013-1115-am.jpg') no-repeat 0 -550px;
width:156px;
height:46px;
border-width: 1px;
border-spacing: 2px;
border-style: solid;
border-color:#ebebeb;
border-collapse: collapse;
/* background-color: white;*/
}
table.hazard-table th {
border-width: 1px;
padding: 1px;
border-style: inset;
border-color: #ebebeb;
background-color: white;
-moz-border-radius: ;
}
table.hazard-table td {
background-position:30 20 ;
border-width: 1px;
padding: 1px;
border-style: inset;
border-color: #ebebeb;
/* background-color: white;*/
-moz-border-radius: ;
}
Related
I'm trying to style the bottom border of a TD. The attached image shows this working as I'd like but the border is slightly too long, I'd like it to match the width of the blue cell above it.
Here is my code:
table {
border-collapse: collapse;
width: 100%;
}
.tab {
border-collapse: separate;
background-color: #5B86EE;
text-align: center;
border-width: 1px;
border-bottom: solid 3px #A0A0A0;
border-top: solid 3px #E1E1E1;
border-left: solid 3px #E1E1E1;
border-right: solid 3px #E1E1E1;
display: table-cell;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.active {
background-color: #5B86EE;
text-align: center;
border-width: 1px;
border-bottom-width: 2px;
border-bottom: solid 3px #640000;
border-top: solid 3px #E1E1E1;
border-left: solid 3px #E1E1E1;
border-right: solid 3px #E1E1E1;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
<table border="0" width="100%%" align="center">
<tbody>
<tr>
<td class="tab">1</td>
<td class="active">2</td>
<td class="tab">3</td>
</tr>
</tbody>
</table>
I have no control over the HTML being used, but I can change the CSS.
Is there anyway to make the bottom border match the width of the cell excluding the left or right border width ?
Also viewing this in Firefox and the border over hang is on the other end, so on the left not the right.
You could use a pseudo element instead of a bottom border:
table {
border-collapse: collapse;
width: 100%;
}
.active,
.tab {
border-collapse: separate;
background-color: #5B86EE;
text-align: center;
border-width: 1px;
border-bottom: solid 3px #A0A0A0;
border-top: solid 3px #E1E1E1;
border-left: solid 3px #E1E1E1;
border-right: solid 3px #E1E1E1;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
position: relative;
}
.active:after {
content: '';
display: block;
position: absolute;
top: 100%;
left: 0;
right: 0;
border-bottom: solid 3px #640000;
}
<table border="0" width="100%%" align="center">
<tbody>
<tr>
<td class="tab">1</td>
<td class="active">2</td>
<td class="tab">3</td>
</tr>
</tbody>
</table>
Please refer to attached
image
How can hide the red line (its a span) from out of div?
Margin left not worked because the line left the other side.
How can fix it?
#keyframes linewidth1 {
0%{
border-bottom: 4px solid white;
width: 0%;
}
25%{
border-bottom: 4px solid white;
border-bottom: 4px solid white;
width: 0%;
}
60%{
border-bottom: 4px solid white;
border-bottom: 4px solid white;
}
75%{
border-bottom: 2px solid transparent;
border-bottom: 2px solid transparent;
}
90%{
width: 100%;
border-bottom: 2px solid #e10000;
border-bottom: 2px solid #e10000;
}
}
.line2 {
left: 0;
animation: linewidth1 3s;
border-bottom: 2px solid #e10000;
width: 100%;
float: left;
height: 1px;
display: inline-block;
margin-top: 57px;
}
.single_style {
position: relative;
padding-top: 15px;
background-color: rgb(238, 238, 234);
background-repeat: repeat;
background-size: auto auto;
border-bottom-color: cadetblue;
border-bottom-left-radius: 57px;
border-bottom-right-radius: 11px;
border-bottom-style: solid;
border-left-color: cadetblue;
border-left-style: solid;
border-right-color: cadetblue;
border-right-style: solid;
border-top-color: cadetblue;
border-top-left-radius: 170px;
border-top-right-radius: 39px;
border-top-style: solid;
border-top-width: 4px;
border-right-width: 2px;
border-left-width: 1px;
border-bottom-width: 1px;
margin-left: 20px;
margin-right: 3%;
margin-top: auto;
max-width: 1200px;
margin-bottom: 5px;
margin-top: 5px;
}
<body>
<div class="single_style" style="height:200px;">
<span class="line2"></span>
</div>
</body>
How can hide the red line (its a span) from out of div?
Margin left not worked because the line left the other side.
How can fix it?
added overflow: hidden; to .single_style
.line2 {
left: 0;
animation: linewidth1 3s;
border-bottom: 2px solid #e10000;
width: 100%;
float: left;
height: 1px;
display: inline-block;
margin-top: 57px;
}
.single_style {
position: relative;
padding-top: 15px;
background-color: rgb(238, 238, 234);
background-repeat: repeat;
background-size: auto auto;
border-bottom-color: cadetblue;
border-bottom-left-radius: 57px;
border-bottom-right-radius: 11px;
border-bottom-style: solid;
border-left-color: cadetblue;
border-left-style: solid;
border-right-color: cadetblue;
border-right-style: solid;
border-top-color: cadetblue;
border-top-left-radius: 170px;
border-top-right-radius: 39px;
border-top-style: solid;
border-top-width: 4px;
border-right-width: 2px;
border-left-width: 1px;
border-bottom-width: 1px;
margin-left: 20px;
margin-right: 3%;
margin-top: auto;
max-width: 1200px;
margin-bottom: 5px;
margin-top: 5px;
overflow: hidden;
}
<body>
<div class="single_style" style="height:200px;">
<span class="line2"></span>
</div>
</body>
Simply create this line using background:
.single_style {
background:linear-gradient(#e10000,#e10000) 0 57px/100% 2px no-repeat;
animation: linewidth1 3s;
padding-top: 15px;
background-color: rgb(238, 238, 234);
border-radius:170px 39px 11px 57px;
border-top: 4px solid;
border-right: 2px solid;
border-left: 1px solid;
border-bottom: 1px solid;
border-color: cadetblue;
margin:5px 3% 5px 20px;
max-width: 1200px;
}
#keyframes linewidth1 {
0%,25%{
background-size:0% 2px;
background-image:linear-gradient(#fff,#fff);
}
60%{
background-size:100% 4px;
}
75%{
background-size:100% 0px;
background-image:linear-gradient(#fff,#fff);
}
75.01%{
background-size:100% 0px;
background-image:linear-gradient(#e10000,#e10000);
}
90%{
background-size:100% 2px;
background-image:linear-gradient(#e10000,#e10000);
}
}
<body>
<div class="single_style" style="height:200px;">
</div>
</body>
Float the span to the right side and decrease its width to 95%
.line2 {
left:0;
animation: linewidth1 3s;
border-bottom: 2px solid #e10000;
width: 95%;
float: right;
height: 1px;
display: inline-block;
margin-top: 57px ;
}
.single_style{
position: relative;
padding-top: 15px;
background-color: rgb(238, 238, 234);
background-repeat: repeat;
background-size: auto auto;
border-bottom-color: cadetblue;
border-bottom-left-radius: 57px;
border-bottom-right-radius: 11px;
border-bottom-style: solid;
border-left-color: cadetblue;
border-left-style: solid;
border-right-color: cadetblue;
border-right-style: solid;
border-top-color: cadetblue;
border-top-left-radius: 170px;
border-top-right-radius: 39px;
border-top-style: solid;
border-top-width: 4px;
border-right-width: 2px;
border-left-width: 1px;
border-bottom-width: 1px;
margin-left: 20px;
margin-right: 3%;
margin-top: auto;
max-width: 1200px;
margin-bottom: 5px;
margin-top: 5px;
}
<body>
<div class="single_style" style="height:200px;">
<span class="line2"></span>
</div>
</body>
I have the following HTML & CSS
HTML
<table class="StandardTable">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 25%">A</td>
<td style="width: 25%">B</td>
<td style="width: 25%">C</td>
<td style="width: 25%">D</td>
</tr>
</tbody>
</table>
CSS
.StandardTable {
border: 1px solid #656565;
border-radius: 10px;
-moz-border-radius: 10px;
margin-left: auto;
margin-right: auto;
box-shadow: 10px 10px 5px #888888;
width: 300px;
margin-bottom: 15px;
border-spacing: 0;
}
.StandardTable thead {
border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 5px;
background-color: lightgray;
}
I have created the jsFiddle for this too. The background in the THEAD always bleeds / runs out of the border and does not round.
I tested in IE, FF, and chrome. It is most apparent in chrome because the bleed happens above the border where in IE and FF the bleed happens under.
Any help in fixing the issue (make the background stop correctly around the edges), is greatly appreciated. I did try to add Border-Radius on TH element, but that did not work.
You need to apply the rounded corners to the first and last table cell in the thead. Set the background for thead to transparent, and add this:
.StandardTable thead th{
background: lightgray;
}
.StandardTable thead th:first-of-type{
border-top-left-radius: 10px;
}
.StandardTable thead th:last-of-type{
border-top-right-radius: 10px;
}
Demo JsFiddle
try this (worked for me in FF)
.StandardTable {
border: 1px solid #656565;
border-radius: 10px;
-moz-border-radius: 10px;
margin-left: auto;
margin-right: auto;
box-shadow: 10px 10px 5px #888888;
width: 300px;
margin-bottom: 15px;
border-spacing: 0;
}
.StandardTable thead tr th {
background-color: lightgray;
}
.StandardTable thead tr th:first-child {
z-index:-1;
border-radius: 10px 0 0 0;
-moz-border-radius: 10px 0 0 0;
border-radius: 10px 0 0 0;
}
.StandardTable thead tr th:last-child {
z-index:-1;
border-radius: 0 10px 0 0;
-moz-border-radius: 0 10px 0 0;
border-radius: 0 10px 0 0;
}
Another workaround is to do the following
.StandardTable {
border: 1px solid #656565;
border-radius: 10px;
-moz-border-radius: 10px;
margin-left: auto;
margin-right: auto;
box-shadow: 10px 10px 5px #888888;
width: 300px;
margin-bottom: 15px;
border-spacing: 0;
background-color: lightgray;
}
.StandardTable tbody tr td {
background-color: white;
}
.StandardTable tbody tr:last-child td:last-child {
border-bottom-right-radius: 10px;
}
.StandardTable tbody tr:last-child td:first-child {
border-bottom-left-radius: 10px;
}
I want to set each element in the first row of my table to have a left border of a certain color and a right border of a certain color. Unfortunately, it looks like the borders of adjacent table cells are overlapping and I only get the left border color showing. The left border is supposed to be light gray and the right side dark gray.
Here is my HTML generating the table. (HTML is generated in cherrypy)
<th id="tbl_head" colspan='4'>%s</th>
<tr>
<td id="colhead">Track</td>
<td id="colhead">Artist</td>
<td id="colhead_time">Time</td>
<td id="colhead">Album</td>
</tr>
Here is my CSS:
table {
font-family: verdana,arial,sans-serif;
font-size:11px;
margin-left: auto;
margin-right: auto;
border-width: 1px;
border-collapse: collapse;
}
td {
padding: 3px;
}
#colhead {
font-weight: bold;
text-align: left;
background-color: #989898;
color: #000000;
border-left-color: #aeaeae;
border-left-style: solid;
border-left-width: 2px;
border-right-color: #6c6c6c;
border-right-style: solid;
border-right-width: 1px;
}
#colhead_time {
font-weight: bold;
text-align: right;
background-color: #989898;
color: #000000;
border-left-color: #aeaeae;
border-left-style: solid;
border-left-width: 2px;
border-right-color: #6c6c6c;
border-right-style: solid;
border-right-width: 1px;
}
Use the below properties on your table CSS.
border-collapse: separate;
border-spacing: 0px;
table {
font-family: verdana, arial, sans-serif;
font-size: 11px;
margin-left: auto;
margin-right: auto;
border-width: 1px;
border-collapse: separate;
border-spacing: 0px;
}
td {
padding: 3px;
}
#colhead {
font-weight: bold;
text-align: left;
background-color: #989898;
color: #000000;
border-left-color: red;
border-left-style: solid;
border-left-width: 2px;
border-right-color: blue;
border-right-style: solid;
border-right-width: 1px;
}
#colhead_time {
font-weight: bold;
text-align: right;
background-color: #989898;
color: #000000;
border-left-color: red;
border-left-style: solid;
border-left-width: 2px;
border-right-color: blue;
border-right-style: solid;
border-right-width: 1px;
}
<table>
<th id="tbl_head" colspan='4'>%s</th>
<tr>
<td id="colhead">Track</td>
<td id="colhead">Artist</td>
<td id="colhead_time">Time</td>
<td id="colhead">Album</td>
</tr>
</table>
Fiddle Demo
In your css, you have added the wrong value for border-color property.
You write it as:
border-right-color: 1px solid #6c6c6c;
while it should be:
border-right-color: #6c6c6c;
It's your use of border-collapse: collapse; use border-spacing:0;border-collapse:no-collapse; instead.
I'm creating a table to display all my subjects content.
My table td vertical border doesn't appear, below is the css code.
Please help.
table.subjects {
border-width: 1px;
border-spacing: 2px;
border-style: solid;
border-color: gray;
border-collapse: collapse;
background-color: white;}
table.subjects th {
border-width: 1px;
padding: 1px;
border-style: inset;
border-color: gray;
background-color: white;
-moz-border-radius: ;}
table.subjects td {
border-width: 1px;
padding: 1px;
border-style: solid;
border-color: gray;
background-color: white;
-moz-border-radius: ;}
in html you shoud set border of attribute of table to 1 . did you do it?
it is solution:
<table border="1">
you can use css class like
.tableborder{
border:1px solid gray;
}