I want to code the below design in html and css
The result I got:
I want to center other content in the td elements, so it will be aligned with the product image. I tried to use display: list-item with the product image and it works in Chrome, like the below image:
CSS code:
table {
width: 100%;
thead {
border-bottom: 1px solid #eeeeee;
}
th {
text-align: left;
text-transform: uppercase;
color: #909090;
padding-bottom: 1em;
}
.thumb {
width: 100px;
height: 100px;
background: #f7f7f7;
border: 1px solid #e5e5e5;
display: list-item;
}
tr:nth-child(even) {
background: #fafafa;
border-bottom: 1px solid #e5e5e5;
border-top: 1px solid #e5e5e5;
}
td,
tr {
padding: 1em 0;
span {
display: block;
}
}
}
Please check this fiddle
Thanks,
In that third image you have shown, that does not look “centered” (on the vertical axis), but aligned to the top instead. If that is what you want – then simply specify vertical-align for the table cells accordingly:
.cart table td {
vertical-align:top;
}
http://jsfiddle.net/ahpegfvj/3/
Related
Right now I'm trying to add bottom borders to each tbody within a table.
Currently I have borders around my tr elements in general but I would like to preserve those while adding bottom borders to the tbody.
I'm currently using pseudo elements in my solution and produces the effect I want but for some reason the background of the pseudo element isn't at 100% width.
I would like to know how to create full width bottom borders on the tbody element while still preserving the borders on the tr elements?
Here's a fiddle of my current problem:
https://jsfiddle.net/4eucexwb/
I'm also open to JavaScript/jQuery solutions too.
I' ve modificated Khurrams solutions a little bit and I think this is what you want.
html {
font-size: 13px;
padding: 2rem;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.table {
margin-bottom: 1rem;
width: 100%;
background-color: #e6e6f5;
thead {
text-align: left;
background-color: #e6e6f5;
th {
padding: 0 0.75rem;
}
}
tbody {
background-color: #fff;
&:last-child:after {
border-bottom: 1px solid #d0d0dd;
}
&:after {
content: '';
background-color:#e6e6f5;
display: table-row;
height: 0.5rem;
border-left: 1px solid #d0d0dd;
border-right: 1px solid #d0d0dd;
}
}
tbody, tfoot {
td {
padding: 0 0.75rem;
}
}
tr {
height: 1.75rem;
border: 1px solid #d0d0dd;
}
}
I gave a background-color to the table (#e6e6f5) and the tbody (white) elements. After that the solutions is nearly 90 %. The last thing to do is to give the tbody:after pseudo-element a background-color of #e6e6f5.
Hope this helps.
Regards
Instead of styling the pseudo element ::after give style border-bottom to tbody like this.
.table tbody{
border-bottom: 0.5rem solid #e6e6f5;
}
Edited:
After reading your code line by line your solution is HERE. You're creating pseudo element as table row, and your table has 4 td therefore pseudo element takes width equal to first td. Problem was position. I gave position: relative; to table class and position: absolute; to your pseudo element and some width to it. Moreover you can set width base on media queries for better style.
Updated CSS.
html {
font-size: 13px;
padding: 2rem;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.table {
margin-bottom: 1rem;
width: 100%;
background-color: #fff;
position: relative; //----First change
thead {
text-align: left;
background-color: #e6e6f5;
th {
padding: 0 0.75rem;
}
}
tbody {
&:after {
content: '';
display: table-row;
background: #e6e6f5;
height: 0.5rem;
border-left: 1px solid #d0d0dd;
border-right: 1px solid #d0d0dd;
position: absolute; //-----Second change
width: 99.7%; //------Third change
}
&:last-child:after {
border-bottom: 1px solid #d0d0dd;
}
}
tbody,
tfoot {
td {
padding: 0 0.75rem;
}
}
tr {
height: 1.75rem;
border: 1px solid #d0d0dd;
}
}
This is my failed attempt:
https://jsfiddle.net/j75hxxa2/1/
I want the block on the right side and the extra gray part gone.
Adding
float: right;
To the parent makes its children very small and tiny. If I try to widen the children by adding
width: 50%;
They break the line.
Is there a simple fix?
(Also I think
margin-top: 1px;
Isn't working?)
Thanks in advance
A better way is to use a table:
HTML:
<table>
<tr><td>Text</td><td>Text</td><td>Text</td><td>Text</td></tr>
<tr><td>I</td><td>II</td><td>III</td><td>IIII</td></tr>
</table>
CSS:
table {
border-collapse: collapse;
background: #000;
border-top: 1px solid #777;
border-left: 1px solid #777;
}
table tr td {
border-right: 1px solid #777;
border-bottom: 1px solid #777;
color: #fff;
}
Add float left to .cell as below, I have changed background color, change it back to your previously assigned or as you wish.
.cell {
width: 24.8%;
float:left;
}
#table {
margin-right: 1px;
margin-top: 1px;
background-color: #f22;
width:100%;
height:37px;
}
How can I make img or element with image background same height, padding and margin as other links?
Here is my code
a {
display: inline-block;
padding: 1%;
border: 1px solid black;
color: black;
font-size: 15px;
}
a img {
height: 15px;
border: 1px solid red;
}
.backg {
display: inline-block;
padding: 1%;
border: 1px solid red;
color: black;
background-image: url("https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/user_male2-512.png");
background-size: 100%;
}
here is codepen http://codepen.io/anon/pen/ZQRyOd?editors=1100
I am not sure that I understood the question but you can add vertical-align: middle; to .backg and a img
In my opinion if you don't care about older browser you should use flexbox
Here is a decent guide for doing so:
A Complete Guide to Flexbox
I am working on a web page which has a table with several columns as follows
In the above picture each td has blue border but I am trying increase thickness for left border of Ask1 using the following markup and CSS
HTML
<td class="clientOffer1">Ask1</td>
CSS
clientOffer1 {
border-left: 3px solid #0088cc;
}
but above CSS is replaced by the original css of td which is used for remaining columns which is as follows
td {
padding: 1px;
line-height: 10px;
text-align: center;
/*background-color:#3C78B5;*/
vertical-align: auto;
border: 1px solid #0088cc;
width: 120px;
}
How do use both CSS without conflicting one another?
Classes are selected with a leading period in CSS:
.clientOffer1 { ... }
DEMO
td {
padding: 1px;
line-height: 10px;
text-align: center;
/*background-color:#3C78B5;*/
vertical-align: auto;
border: 1px solid #0088cc;
width: 120px;
}
.clientOffer1 {
border-left: 3px solid #0088cc;
}
If you are still having troubles, it would be because some level of specificity is taking hold. Try the following:
.client {
border-left: 3px solid #0088cc !important;
}
Here's some reading material:
Specificity
I can't figure it out without using float:right or using relative positioning. If I use either, it will move around when people zoom in and out. I'm trying to figure out how to make it stay exactly where I place it even when people zoom in and out.
http://htmlcss.netii.net/
HTML Structure:
<div class="staff-block">
<img class="staff-pics" />
<div class="staff-text">
<h3>
<p>
</div>
</div>
CSS:
.staff-block { /* Red */
border: 1px dashed red;
display: block;
}
.staff-pics { /* Orange */
border: 1px dashed orange;
display: ;
width:150px;
display: inline-block;
margin-bottom: 50px;
}
.staff-text { /* Yellow */
border: 1px dashed yellow;
width: 70%;
font-size: 15px;
color: #FFCC00;
display: inline-block;
}
.staff-text h3 { /* Green */
border: 1px dashed lime;
margin-bottom: 10px;
color: white;
}
.staff-text p { /* Blue */
border: 1px dashed aqua;
}
Since they are already inline-block elements, simply add vertical-align:top.
.staff-text {
vertical-align: top;
}
It works - I tested it via the dev tool in Chrome..
Updated CSS:
.staff-text {
border: 1px dashed lime;
width: 70%;
font-size: 15px;
color: #FFCC00;
display: inline-block;
vertical-align: top;
}