I'm working on modifying a legacy application where I'm allowed to do only css changes but no html and javascript changes. There are some styling issues which I'm trying to resolve thru CSS and one of them is that the elements are getting hidden behind each other.
I tried setting the position attributes and the z-index attributes at different levels for the elements, but none of them seem to work. Here is a scaled down version of the layout of the application
Currently the yellow box is partially hidden under the pink box. The expectation here is that the yellow box is shown completely, overlapping on both the aqua and pink boxes. Any help to resolve this by modifying only the CSS and not touching anything inside the table element would greatly be helpful
.mainTable {
border: black 1px solid;
}
.aquaBox {
border: green 1px solid;
background: aqua;
overflow: visible;
}
.yellowBox {
border: black 1px solid;
background: yellow;
}
.pinkBox {
border: red 1px solid;
position: relative;
background: pink
}
<!DOCTYPE html>
<html>
<body>
<table class='mainTable'>
<tr>
<td rowspan='2' class='aquaBox' style=' width:100px; height: 100px;'>
abcdefg hijklmnop qrstuvw xyz
<div class='yellowBox' style='width: 40px; top: 25px; height: 40px; margin-top:25px; margin-left:60px; position:absolute; '>
</div>
</td>
</tr>
<tr>
<td class='pinkBox' style='width: 100%; height: 200px;'>
</td>
</tr>
</table>
</body>
</html>
You can add z-index: 1 to make this work, which promotes the element's stacking order and allows it to show on top of elements placed outside the stacking order.
.yellowBox {
…
z-index: 1;
}
Demo
.mainTable {
border: black 1px solid;
}
.aquaBox {
border: green 1px solid;
background: aqua;
overflow: visible;
}
.yellowBox {
border: black 1px solid;
background: yellow;
z-index: 1;
}
.pinkBox {
border: red 1px solid;
position: relative;
background: pink
}
<table class='mainTable'>
<tr>
<td rowspan='2' class='aquaBox' style=' width:100px; height: 100px;'>
abcdefg hijklmnop qrstuvw xyz
<div class='yellowBox' style='width: 40px; top: 25px; height: 40px; margin-top:25px; margin-left:60px; position:absolute; '>
</div>
</td>
</tr>
<tr>
<td class='pinkBox' style='width: 100%; height: 200px;'>
</td>
</tr>
</table>
By setting the z-index: 1; on your .yellowBox class, I was able to get the desired layout.
<!DOCTYPE html>
<html>
<head>
<style>
.mainTable {
border: black 1px solid;
}
.aquaBox {
border: green 1px solid;
background: aqua;
overflow: visible;
}
.yellowBox {
border: black 1px solid;
background: yellow;
z-index: 1;
}
.pinkBox {
border: red 1px solid;
position: relative;
background: pink
}
</style>
</head>
<body>
<table class='mainTable'>
<tr>
<td rowspan='2' class='aquaBox' style=' width:100px; height: 100px;'>
abcdefg hijklmnop qrstuvw xyz
<div class='yellowBox' style='width: 40px; top: 25px; height: 40px; margin-top:25px; margin-left:60px; position:absolute; '>
</div>
</td>
</tr>
<tr>
<td class='pinkBox' style='width: 100%; height: 200px;'>
</td>
</tr>
</table>
</body>
</html>
```````````````````````````` Currently the yellow box is partially hidden under the pink box. The expectation here is that the yellow box is shown completely, overlapping on both the aqua and pink boxes. Any help to resolve this by modifying only the
CSS and not touching anything inside the table element would greatly be helpful
Related
I have been trying to include the table inside the div, but it seems not to be working. Here is my code:
table {
border: 5px red solid;
border-style: double;
background-color: aqua;
position: absolute;
}
body {
background-color: azure;
text-align: center;
}
div {
position: relative;
border: 5px red solid;
border-style: ;
}
<div>
<p>Hello this is for the practice.</p>
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</div>
position: absolute;
removes an element from the document flow. That means that other elements just render as if the absolute positioned element wasn't there at all. Thus, the parent element just ignores the table in your code.
Aside from that, your question and what you want to achieve unfortunately is completely in the dark. Please add details as of what you are aiming to achieve.
It works better if you don't use the 'position' settings:
<style>
table {
border: 5px red solid;
border-style: double;
background-color: aqua;
/*position: absolute;*/
}
body {
background-color: azure;
text-align: center;
}
div {
/*position: relative;*/
border: 5px red solid;
border-style: ;
}
</style>
I have a table with multiple <a> elements within:
.TableClass td {
background-color: #050;
height: 150px;
}
.TableClass a {
background-color: #f00;
width: 100px;
height: 100px;
display: block;
border: 5px solid #000;
}
<div class="TableClass">
<table cellspacing="0" cellpadding="0">
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
</div>
Fiddle: https://jsfiddle.net/p937jbee/1/
Is there a way to avoid double borders?
UPDATE:
I can't change the HTML code and there are multiple <td> instead of 2 of my example.
Here is a solution for multiple cells:
You need to zero out the left border for all cells except first one
.TableClass tr td:not(:first-child) a {
border-left: 0;
}
Have a look at snippet
.TableClass td
{
background-color: #005500;
height: 150px;
}
.TableClass a
{
background-color: #ff0000;
width: 100px;
height: 100px;
display: block;
border: 5px solid #000000;
}
.TableClass tr td:not(:first-child) a {
border-left: 0;
}
<div class="TableClass">
<table cellspacing="0" cellpadding="0">
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</div>
https://jsfiddle.net/54o0efuv/
Just add a seperate class to one or both of the boxes where you remove the border ex. JSFIDDLE
a.one{
border-left: 0px;
}
html:
<a class="one" href="#"></a>
Seefiddle
Add CSS
.TableClass td:nth-child(2) a {
border-left:none;
}
This should work even if you have multiple elements and not just 2. https://jsfiddle.net/p937jbee/4/
.TableClass td
{
background-color: #005500;
height: 150px;
}
.TableClass a
{
background-color: #ff0000;
width: 100px;
height: 100px;
display: block;
border: 4px solid #000000;
}
.TableClass td:first-child a {
border-right: 2px solid #000000;
}
.TableClass td:last-child a {
border-left: 2px solid #000000;
}
For a more consistant build-up I suggest to leave the right border, except for the last td. In case you'd like to add more blocks.
CSS
.TableClass td {
background-color: #005500;
height: 150px;
}
.TableClass td a {
background-color: #ff0000;
width: 100px;
height: 100px;
display: block;
border: 5px solid #000000;
border-right: 0;
}
.TableClass td:last-of-type a {
border-right: 5px solid #000000;
}
border-collapse: collapse;
use this css
The border-collapse property is for use on elements (or elements made to behave like a table through display: table or display: inline-table).
The most straightforward method is to assign border-collapse:collapse to the table and to move the border property from the a elements to the tds. That is all you need to change.
.TableClass table {
border-collapse: collapse; /* new */
}
.TableClass td {
background-color: #005500;
height: 150px;
border: 5px solid #000000; /* moved */
}
.TableClass a {
background-color: #ff0000;
width: 100px;
height: 100px;
display: block;
}
<div class="TableClass">
<table cellspacing="0" cellpadding="0">
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
</div>
.TableClass td
{
background-color: #005500;
height: 150px;
}
.TableClass a
{
background-color: #ff0000;
width: 100px;
height: 100px;
display: block;
}
.elem1{
border-top: 5px solid #000000;
border-bottom: 5px solid #000000;
border-left: 5px solid #000000;
}
.elem2{
border-top: 5px solid #000000;
border-bottom: 5px solid #000000;
border-left: 5px solid #000000;
border-right: 5px solid #000000;
}
<div class="TableClass">
<table cellspacing="0" cellpadding="0">
<td>
</td>
<td>
</td>
</table>
</div>
here is an updated fiddle, hopefully with be a solution for you
Quick answer:
You have to do 2 things, use the nth-of-type on a repeating element, in this case <td> and change how you write your brackets. :P - but really, you may need to say, every 2nd or third block - depending on how you do things. You may want to just use a list instead of a table - depending on the goal. :nth-of-type(2n+2) etc. Look her up. : )
HTML
<table cellspacing="0" cellpadding="0" class="table">
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
CSS
.table a {
background: #ff0000;
width: 100px;
height: 100px;
display: block;
border: 4px solid #000000;
}
.table td:nth-of-type(odd) a {
border-right: 2px solid black;
}
.table td:nth-of-type(even) a {
border-left: 2px solid black;
}
https://jsfiddle.net/6bgbmde5/
or you can use the background of the tr
.table tr {
display: block;
background: black;
padding: 4px;
}
.table a {
background: red;
width: 100px;
height: 100px;
display: block;
}
.table td:not(:last-of-type) a {
margin-right: 4px;
}
There are many ways that all have side-effects and it all depends on hovers and all sorts of stuff. Good luck!
Since OP has stated that they can-not change the HTML a hacky CSS solution must be implemented. Therefor I will use negative margins which many of you frown upon but I don't see any other options available.
Use the following CSS:
.TableClass td {
background-color: #005500;
height: 150px;
}
.TableClass a {
background-color: #ff0000;
width: 100px;
height: 100px;
display: block;
border: 5px solid #000000;
margin-left:-5px;
}
.TableClass td:nth-child(1) a {
margin-left:0px;
}
I am trying the simulate the same effect on the picture for an html page. Is it possible to accomplish this without using an image or JS? I know it can be done horizontally by adding border color top and bottom but I couldn't find a way to do it horizantally.
You can add a grey border-bottom to your element and overlap it partially with a red ::after pseudo-element:
h1 {
border-bottom: 2px solid #E5E5E5;
}
h1:after {
content: '';
display: block;
border-bottom: 2px solid #EC1C24;
margin-bottom: -2px;
max-width: 200px;
}
<h1>Haberler</h1>
.line {
background:gray;
position:relative;
height:2px;
}
.line:before {
content:'';
background:red;
width:30%;
height:2px;
position:absolute;
}
<div class="line">
hr {
margin: 0;
width: 100%;
height: 5px;
background-color: red;
border: 0;
}
hr:after {
content: '';
display: block;
border-bottom: 5px solid green;
max-width: 50%;
}
<hr/>
You can combine a few inline block elements with borders, but I'm not sure if it's worth it (instead of using an image):
div {
width: 120px;
height: 80px;
border-bottom: red 2px solid;
border-top: blue 2px solid;
display: inline-block;
}
#a {
width: 240px;
border-top: green 2px solid;
border-bottom: gray 2px solid
}
<div></div><div id="a"></div>
<table border="0" cellspacing="0" cellpadding="0" style="width:100%;">
<tr style="height:2px;">
<td style="width:10%;background-color:#003b67;"></td>
<td style="width:90%;background-color: #4cff00;"></td>
</tr>
</table>
An extension to #Thilina Dharmasena original post.
I used his implementation to create a progress bar with styled-components
<ProgressBar scroll='90%' />
const ProgressBar = styled.div`
background: #191923;
height: 4px;
position: relative;
&:before {
content: '';
background: #ffc107;
width: ${({ scroll }) => scroll};
height: 4px;
position: absolute;
}
`;
I have a tbody with a background color. The td has a border-radius. However, the background between the border and the table is white.
HTML:
<table>
<tbody>
<tr><td>test</td></tr>
</tbody>
</table>
CSS
table {
border: 100px solid black;
border-radius: 100px;
}
tbody {
background-color: black;
}
td {
background-color: white;
border-radius: 100px;
padding: 100px;
}
http://jsfiddle.net/FKc94/2/
I tried with background-clip but couldn't find a way to make it works. How could I fix that ?
The background-color actually need to be on the table itself:
HTML:
<table>
<tbody>
<tr><td>test</td></tr>
</tbody>
</table>
CSS
table {
border: 100px solid black;
border-radius: 100px;
background-color: black;
}
tbody {
background-color: black;
}
td {
background-color: white;
border-radius: 100px;
padding: 100px;
}
http://jsfiddle.net/FKc94/4/
This question already has answers here:
Border Height on CSS
(12 answers)
Closed 9 years ago.
I have border-right on a table and I would like it to be a few pixels short from the top and bottom, preferably 80-90% height of the <td> as the table won't stay the same.
Like this:
Is this possible to do?
table{
border-right: 1px solid #f00;
}
Fiddle
This isn't possible, as you describe it, as the border of an element extends (by definition) around the full border. You can, however, fake it to some extent using nested elements or with CSS-generated content.
For example, with the following HTML:
<table>
<tbody>
<tr>
<td>text in cell</td>
</tr>
</tbody>
</table>
And the following CSS:
td {
border: 2px solid #000;
/* change the border-color to disguise the presence of the actual border
left as #000 here, to show where the fake 'border' sits in relation to
the actual border-right */
padding: 0.5em;
position: relative;
}
td::after {
content: '';
background-color: #f00;
position: absolute;
left: 100%;
top: 3px;
bottom: 3px;
width: 2px;
}
JS Fiddle demo.
For this to be used in an email client, unfortunately a nested element is required (given the hideously primitive capacities of email clients, even now). So, the following HTML:
<table>
<tbody>
<tr>
<td>text in cell<div></div></td>
</tr>
</tbody>
</table>
And CSS should work:
td {
border: 2px solid #000;
padding: 0.5em;
position: relative;
}
td div {
background-color: #f00;
position: absolute;
left: 100%;
top: 3px;
bottom: 3px;
width: 2px;
}
JS Fiddle demo.
You can do it with a pseudo-element:
table {
position: relative;
}
table:after {
position: absolute;
border-right: 1px solid #f00;
content: "";
top: 5%;
bottom: 5%;
right: -1px;
}
Example: http://jsfiddle.net/hY6Te/11/
Is additional markup acceptable?
Fiddle
<div id="wrapper">
<table width="200" height="100" bgcolor="#eee0e0">
<tr>
<td>TEXT</td>
</tr>
</table>
</div>
table{
border-right: 1px solid #f00;
}
#wrapper {
background: #eee0e0;
padding: 20px 0;
display: table; /* necessary for shirnk wrapping (inline-block would also work)
}