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>
Related
here is the codepen, can anyone say why the borders do not display?
I want to achieve this https://codepen.io/javisp91/pen/PmzpLz without the use of class.
I have used nth-of-type and treated the table like a matrix. This code doesn't display borders. What could be overriding?
tr td {
width:100px;
height: 100px;
}
tr: nth-of-type(1) td: nth-of-type(1) {
border-right: 5px solid black;
border-bottom: 5px solid black;
}
tr: nth-of-type(1) td: nth-of-type(2) {
border-bottom: 5px solid black;
border-right: 5px solid black;
border-left: 5px solid black;
}
tr: nth-of-type(1) td: nth-of-type(3) {
border-left: 5px solid black;
border-bottom: 5px solid black;
}
tr: nth-of-type(2) td: nth-of-type(1) {
border-right: 5px solid black;
border-bottom: 5px solid black;
border-top: 5px solid black;
}
tr: nth-of-type(2) td: nth-of-type(2) {
border-bottom: 5px solid black;
border-right: 5px solid black;
border-left: 5px solid black;
border-top: 5px solid black;
}
tr: nth-of-type(2) td: nth-of-type(3) {
border-left: 5px solid black;
border-bottom: 5px solid black;
border-top: 5px solid black;
}
tr: nth-of-type(3) td: nth-of-type(1) {
border-right: 5px solid black;
border-top: 5px solid black;
}
tr: nth-of-type(3) td: nth-of-type(2) {
border-top: 5px solid black;
border-right: 5px solid black;
border-left: 5px solid black;
}
tr: nth-of-type(3) td: nth-of-type(3) {
border-left: 5px solid black;
border-top: 5px solid black;
}
body {
text-align: center;
}
table {
margin: auto;
}
You're not defining them correctly. See the following fork or snippet:
tr td{
width:100px;
height: 100px;
}
tr td{
border-right: 5px solid black;
border-bottom: 5px solid black;
}
tr td:last-child{
border-right:0;
}
tr:last-child td{
border-bottom:0;
}
body{
text-align: center;
}
table{
margin: auto;
}
<h1>Tic Tac Toe</h1>
<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Logic:
Set all tr td with right and bottom border except the last one.
tr td{
border-right: 5px solid black;
border-bottom: 5px solid black;
}
tr td:last-child{
border-right:0;
}
tr:last-child td{
border-bottom:0;
}
Try this code.
table{
margin: auto;
border: solid // you forget this line in your code put this line to show border.
}
below is the code, i had a one image, below that image there is Price and a button, i want some space between price and button which should be left and right to the image
.new {
font: bold 11px Arial;
text-decoration: none;
background-color: #66C4C4;
color: white;
padding: 2px 6px 2px 6px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
.wrapper {
text-align: center;
}
.show{
background-color: #2D318A;
color: white;
padding: 2px 6px 2px 6px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
border-radius: 3px;
text-decoration: none;
float: right;
<div class="wrapper">
New Released
</div>
<img src="https://www.google.com.np/search?q=django+imagefield&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiHk57k89fcAhUJVH0KHbxAC08Q_AUICygC&biw=1396&bih=690#imgrc=3ukNSrarUo82hM:" style="width: 300px" height="200px">
<table>
<tr>
<td>
Price: Rs 14000
</td>
<td> Join Now</td>
</tr>
</table>
Use this approach it will work fine. Best part is you can even adjust its responsiveness with classes. Don't need to use table for such things. That's considered bad code.
You was missing closing bracket of .new class.
.new {
font: bold 11px Arial;
text-decoration: none;
background-color: #66C4C4;
color: white;
padding: 2px 6px 2px 6px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
}
.image-container {
width: 300px;
height: 200px;
}
.image-container img {
width: 100%;
}
.image-container span {
float: left;
}
.show {
float: right;
background-color: #2D318A;
color: white;
padding: 2px 6px 2px 6px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
border-radius: 3px;
text-decoration: none;
<div class="wrapper">
New Released
</div>
<div class="image-container">
<img src="http://site8.dealerbase.co.nz/media/1707/300x200.gif" />
<br>
<span>Price: Rs 14000</span>
Join Now</div>
Thanks
.item-wrap{
display:inline-block;
border:1px solid #ccc;
}
.item-footer{
display:flex;
justify-content:space-around;
}
<div class="item-wrap">
<div class='item-img'>
<img src='https://picsum.photos/300/200?image=0'>
</div>
<div class='item-footer'>
<div class='price'><p>Price: Rs 14000</p></div>
<div class='item-join'>
<p>Join Now</p>
</div>
</div>
</div>
**HTML:**
<tr>
<td>
Price: Rs 14000
</td>
<td class="joinButtonAlign"> Join Now</td>
</tr>
**CSS**
.joinButtonAlign{
display: inline-block;
padding-left:30px;
}
I'm having trouble with a box shadow on hover and table <TD> background.
Here is a fiddle
<table class="table-z">
<tr>
<td class="w6">
<label>
<input type="checkbox" checked>
</label>
</td>
<td class="w7">
</td>
<td class="w10">
Tez Tour
</td>
<td class="w17">
<div>
tez-tour.com
</div>
</td>
<td class="w16">Заказ № 34546</td>
<td class="w22">Стоимость 20 000 ₽</td>
<td class="last orange ">На рассмотрении</td>
</tr>
<tr>
<td class="w6">
<input type="checkbox">
</td>
<td class="w7">
</td>
<td class="w10">Мвидео</td>
<td class="w17">mvideo.ru</td>
<td class="w16">Заказ № 34546</td>
<td class="w22">Стоимость 20 000 ₽</td>
<td class="last red">Отказ</td>
</tr>
</table>
How can I make tr box shadow on hover and save custom backgrounds on td?
Use background color with alpha channel.
background-color: rgba(226, 226, 226, 0.3)
You need to set a z-index for the td that allows the shadow to show on it and not under it
.table-z tr{
height: 50px;
text-align: center;
font-size: 16px;
position: relative;
}
.table-z td {
z-index: -1;
position: relative;
}
.table-z{
margin-top: 10px;
margin-left: 10px;
width: 100%;
}
.w6{
padding-left: 2%;
width: 6%;
background: yellow;
border-left: 1px solid #e1e1e1;
border-top: 1px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1;
}
.w7{
width: 7%;
background: yellow;
border-top: 1px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1;
}
.w10{
width: 10%;
background: yellow;
border-top: 1px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1;
}
.w17{
width: 17%;
background: yellow;
border-right: 1px solid #e1e1e1;
border-top: 1px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1;
}
.w16{
width: 16%;
border-top: 1px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1;
}
.w22{
width: 22%;
border-top: 1px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1;
}
td.last{
text-align: right;
padding-right: 35px;
border-top: 1px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1;
border-right: 1px solid #e1e1e1;
}
.table-z{
border-collapse: collapse
}
.table-z tr:last-child td:first-child {
border-bottom-left-radius: 5px;
}
.table-z tr:last-child td:last-child {
border-bottom-right-radius: 5px;
}
.le{
margin-left: 10px;
width: 240px;
}
table {
border-collapse: collapse;
border-radius: 5px;
border-style: hidden; /* hide standard table (collapsed) border */
box-shadow: 0 0 0 1px #e1e1e1; /* this draws the table border */
}
.table-z tr:hover {
box-shadow: 0px 0px 12px 5px red;
cursor: pointer;
}
<table class="table-z">
<tr>
<td class="w6">
<label>
<input type="checkbox" checked>
</label>
</td>
<td class="w7">
</td>
<td class="w10">
Tez Tour
</td>
<td class="w17">
<div>
tez-tour.com
</div>
</td>
<td class="w16">Заказ № 34546</td>
<td class="w22">Стоимость 20 000 ₽</td>
<td class="last orange ">На рассмотрении</td>
</tr>
<tr>
<td class="w6">
<input type="checkbox">
</td>
<td class="w7">
</td>
<td class="w10">Мвидео</td>
<td class="w17">mvideo.ru</td>
<td class="w16">Заказ № 34546</td>
<td class="w22">Стоимость 20 000 ₽</td>
<td class="last red">Отказ</td>
</tr>
</table>
simply change your tr to td for the hover
.table-z TD:hover {
-webkit-box-shadow: 0px 0px 12px 5px rgba(233,233,233,1);
-moz-box-shadow: 0px 0px 12px 5px rgba(233,233,233,1);
box-shadow: 0px 0px 12px 5px rgba(233,233,233,1);
cursor: pointer;
}
I have the following, where I am creating a triangle (that looks like it has a border) with css.
I want to create another triangle, exactly the same, but about 50px to the right of the 1st one.
How would you do these 2 :before's :after's ???
JSfiddle Here
HTML
<div class="section-modules">
<div class="my-account">
<div class="section-module-light">
<h3>Register Here</h3>
<p>It’s quick and easy and you’ll be the first to know about new bits we release.</p>Register Now
</div>
</div>
</div>
CSS
.section-module-light:after,
.section-module-light:before {
content: '';
position: absolute;
}
/* Styling block element */
.my-account .section-module-light {
position: relative;
margin-bottom: 2em;
padding: 1em;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
background-color: transparent;
color: #444;
}
/* Stroke */
.my-account .section-module-light:before {
bottom: -0px;
left: 150px;
border-width: 36px;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #ccc;
}
/* Fill */
.my-account .section-module-light:after {
bottom: -1px;
left: 150px;
border-width: 34px;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid white;
}
JSfiddle Here
you do not need to create the triangle with separate stroke and fill, use css3 transform rotate. Then you can use before for one triangle and after for the second one.
display: block;
width: 34px;
height: 34px;
transform: rotate(45deg);
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
background: white;
see the whole code here: http://jsfiddle.net/07jfLdwL/
You can use CSS3 transform rotate properties. See documentations.
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;
}