In below image, you can see all values inside table are aligned in single line properly except under sku column.
we are using following code :
<td class ="skuam">
<?php echo $sku = Mage::getModel('catalog/product')->load($products->getId())->getSku();?>
</td>
I tried increasing top : 10px; but its working only for one row.
.wk_row_view td {
border-left: 1px solid #ccc;
padding: 10px;
border-bottom: 1px solid #ccc;
}
.wk_first_td {
width: 26%;
border-left: none!important;
}
.skuam {
Position:relative;
top:0px;
}
.wk_row_view td {
border-left: 1px solid #ccc;
padding: 10px;
border-bottom: 1px solid #ccc;
}
.wk_first_td {
width: 26%;
border-left: none!important;
}
.skuam {
Position:relative;
top:0px;
}
<table>User9999: Please fill this</table>
Try to add vertical-align: middle; in all td tags.
.wk_row_view td {
border-left: 1px solid #ccc;
padding: 10px;
border-bottom: 1px solid #ccc;
vertical-align: middle;
}
Related
I wish to extend the border-top of each <tr> element in a HTML table seamlessly on either side by 1rem.
body {
padding: 4rem;
}
table {
border-collapse: collapse;
}
tr {
border-top: 1px solid #000;
}
tr:before {
content: '';
display: block;
width: 2rem;
border-top: 1px solid black;
}
tr:after {
content: '';
display: block;
width: 2rem;
border-top: 1px solid black;
}
td {
padding-top: 1rem;
padding-bottom: 1rem;
}
<table>
<tr><td>Hello</td><td>Goodbye</td></tr>
<tr><td>Hello</td><td>Goodbye</td></tr>
<tr><td>Hello</td><td>Goodbye</td></tr>
</table>
The border appears as if it has a height of 2px rather than 1px. How do I fix this so that the border is seamless on either side?
Don't use border-collapse: collapse.
body {
padding: 4rem;
}
table {
border-spacing: 0;
}
td {
border-top: 1px solid #000;
}
tr:before {
content: '';
display: block;
width: 2rem;
border-top: 1px solid black;
}
tr:after {
content: '';
display: block;
width: 2rem;
border-top: 1px solid black;
}
td {
padding-top: 1rem;
padding-bottom: 1rem;
}
<table>
<tr><td>Hello</td><td>Goodbye</td></tr>
<tr><td>Hello</td><td>Goodbye</td></tr>
<tr><td>Hello</td><td>Goodbye</td></tr>
</table>
I'm working on putting alternating background color for columns in a table, and I have one working CSS code for a pretty simple table.
But when it gets a little bit complicated (with rowspan / colspan) my CSS code fails. Can someone help me here please? Guide me to which direction I should take to fix it?
The table codes I'm working on are all generated by someone else and I have no control over it. The tables they would make are all valid HTML codes, the CSS I need to make should work on them.
You can see my working / failing CSS code here:
http://www.cssdesk.com/u7ZUu
or
http://codepen.io/anon/pen/ORPLgz
table.specialtable {
border-top: 2px solid #00ABEF;
border-bottom: 2px solid #00ABEF;
background-colo: #FFF;
font-size: 11px;
}
table.specialtable th {
background-color: #B8E5FA;
border-right: 1px solid #FFF;
border-left: 1px solid #FFF;
padding: 4px 2px;
}
table.specialtable td {
padding: 4px 2px;
text-align: center;
}
table.specialtable td:first-child {
text-align: left;
}
table.specialtable td:nth-child(even){
background-color: #E2F4FE;
}
table.specialtable td:nth-child(odd){
background-color: #FFF;
}
this is kinda crazy markup but it does what you're looking for. I got rid off some useless over specificity while at it, and I'm using SCSS, hope you don't mind.
I forked your pen here: http://codepen.io/memoblue/pen/yayBpA
Here's the relevant code:
table {
border-top: 2px solid #00ABEF;
border-bottom: 2px solid #00ABEF;
background-colo: #FFF;
font-size: 11px;
}
table th {
background-color: #B8E5FA;
border-right: 1px solid #FFF;
border-left: 1px solid #FFF;
padding: 4px 2px;
}
table td {
padding: 4px 2px;
text-align: center;
}
table td:first-child {
text-align: left;
}
table td:nth-child(even){
background-color: #E2F4FE;
}
table td:nth-child(odd){
background-color: #FFF;
}
.specialtable ~ table {
tr:nth-child(2n) {
td:first-child {
background-color: #E2F4FE;
}
td:nth-child(2n) {
background-color: #fff;
}
&:nth-child(8) {
td:first-child {
background-color: #fff;
}
}
}
}
I am trying to achieve the arrow pointing downwards...
right now its showing as trapezium there is some problem in CSS arrow code...
providing my code below.....
Output
https://docs.google.com/file/d/0B3IBJKENGE7RRFR1WHZDYTF6LTQ/edit
<div class="icon__controls__controls">
<div><i class="zoom-out"></i>
<i class="icon-threesixty"></i>
</div>
</div>
CSS :
.icon__controls__controls {
float: left;
display: block;
margin-right: 2.1276595745%;
width: 36.170212766%;
margin-left: 38.2978723404%;
margin-top: 10px;
margin-bottom: 30px;
text-align: center;
}
.icon__controls__controls:last-child {
margin-right: 0;
}
.icon__controls__controls [class^=icon-] {
font-size: 20px;
font-size: 1.25rem;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
color: #666;
margin: 0 5px;
vertical-align: top;
}
.icon__controls__controls .zoom-out {
color: red;
}
.icon__controls__controls:after {
display: none;
content: '';
z-index: 3;
border: 50px solid transparent;
/* border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black; */
}
.icon__controls__controls:after {
border-top-color: #ef6f00;
}
.icon__controls__controls.active:after {
display: block;
}
LIVE DEMO
This as basically all what you need to understand how it works:
STYLE:
.arrow{
width:20px;
height:20px;
position:relative;
}
.arrow:before{
content:'';
position:absolute;
top:0;
left:0;
width:0;
height:0;
border-left:20px solid transparent;
border-right:20px solid transparent;
border-bottom:0px solid transparent;
border-top:20px solid orange;
}
HTML:
<div class=arrow><div>
if you want it to point up just switch topand bottom
border-top:0px solid transparent;
border-bottom:20px solid orange;
Same for leftand right.
I hope this will help you understanding how arrow are created.
Basic sample :
<div class="arrowBorder"></div>
.arrowBorder {
height : 0px;
width : 0px;
border-top: 50px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
http://jsbin.com/qusecu/4/watch?html,css,output
see more - CSS clipping or masking
You should find the below bit more simpler
css
.arrow{
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
width:20px;
height:20px;
position:relative;
border-left:20px solid transparent;
border-right:20px solid transparent;
border-bottom:20px solid transparent;
border-top:20px solid orange;
}
html
<div class=arrow><div>
I need your help,
What used to work in IE7 was the below to freeze the top row (header) of an HTML table:
#data tr th {
top: expression(this.offsetParent.scrollTop);
position: relative;
}
It seems that this is no longer the case with IE10. That said, how can my existing coding be modified such that I would be able to freeze the top header row of my table like good old times lol
I've made a fiddle here: http://jsfiddle.net/8qq9Z/3/
Here is the CSS markup:
#data_container {
height: 160px;
border: 1px solid #808080;
scrollbar-base-color: #DFDFDF;
scrollbar-arrow-color: #235A81;
overflow-y: scroll;
overflow-x: scroll;
margin-top: 5px;
padding:0px;
position: relative;
}
#data {
color: rgb(11,63,113);
border: 0px;
width: 100%;
cursor: default;
table-layout: fixed;
margin:0px;
border:0px;
border-collapse:collapse;
}
#data th {
height: 18px;
cursor: pointer;
padding: 3px;
width: 140px;
border-top: none;
border-bottom: 1px solid rgb(128,128,128);
border-right: 1px solid rgb(128,128,128);
}
#data td {
padding: 3px;
border-right: 1px solid rgb(128,128,128);
border-bottom: 1px solid rgb(128,128,128);
}
#data th:hover {
text-decoration: underline;
}
#data tr th {
top: expression(this.offsetParent.scrollTop);
position: relative;
}
#data th:first-child {
border-left: 0;
}
I'm creating a system where users can add some products to their cart and I want them to be able to add some items with a up-arrow and a down-arrow. These arrows are to the right of some text. I've prepared a JSFiddle with the current setup:
FIDDLE
the html:
<p>1</p>
<div class="addbutton"></div>
<div class="minbutton"></div>
and the css:
p {
display: inline-block;
margin: 0;
}
.addbutton {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
display: inline-block;
}
.minbutton {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid black;
display: inline-block;
}
Now I want the arrows to be on top of each other (with a little margin between them) but I can't seem to figure out how to do it. Could anyone help me to accomplish this?
Thanks!
Add position: absolute; to your .addbutton class. This way it stays it's place, but allows the next element to be rendered on the same position. Here's your fiddle
change you .addbutton class to block instead of inline-block
.addbutton {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
display: block;
}