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>
Related
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
I am trying to make a tooltip for my application so that when i hover over some writing, a popup appears. The writing that is to be hovered over is not fully visible (ie it is in a table cell with overflow:hidden so the words cut off). I want to display the full writing in a tooltip when hovering over it. I want the tooltip to be fully visible, unaffected by the overflow:hidden of the table cell. Here is what I have so far:
CSS:
.tooltip {
position: relative;
}
.tooltip:hover:after {
background: rgba(0,0,0,.8);
color: #fff;
top: -30px;
left: 10px;
border-radius: 15px;
content: attr(alt);
padding: 5px 15px;
position: absolute;
}
HTML:
<table>
<tr>
<td style="overflow:hidden">
<span alt="reallyLongFullWriting" class="tooltip">partiallyHiddenWriting</span>
</td>
<td></td>
</tr>
</table>
It works like this but the tooltip gets hidden when it overflows as well. Please help me figure out how to make the tooltip fully visible and not partially hidden. Thanks.
Edit:
Here is a photo of what seems to be happening:
If you will keep the same structure you cannot make the element visible with overflow:hidden.
A solution is to specify a height/width on the td element to create the necessary space for the :after element.
table {
margin: 50px;
}
.tooltip {
position: relative;
}
td {
height: 80px;
overflow: hidden;
border:1px solid;
}
.tooltip:hover:after {
background: rgba(0, 0, 0, .8);
color: #fff;
top: -30px;
left: 10px;
border-radius: 15px;
content: attr(alt);
padding: 5px 15px;
position: absolute;
}
<table>
<tr>
<td>
<span alt="fullWriting" class="tooltip">partiallyHiddenWriting</span>
</td>
</tr>
</table>
Another alternative is to use fixed position BUT without changing top/left/right/bottom property to keep the tooltip relative to its initial position. Instead adjust the position with some negative margin.
This solution will not work if you have scrolling in your page so it's not a generic solution. because an element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled.
table {
margin: 50px;
}
.tooltip {
position: relative;
}
td {
overflow: hidden;
border:1px solid;
}
.tooltip:hover:after {
background: rgba(0, 0, 0, .8);
color: #fff;
margin-top:-30px;
border-radius: 15px;
content: attr(alt);
padding: 5px 15px;
position: fixed;
z-index:999;
}
<table>
<tr>
<td>
<span alt="fullWriting" class="tooltip">partiallyHiddenWriting</span>
</td>
</tr>
</table>
A workaround to still be able to use fixed position on scrollable page is to apply a transform with no effect on a parent element:
body {
min-height:120vh;
}
table {
margin: 50px;
transform:translate(0,0);
}
.tooltip {
position: relative;
}
td {
overflow: hidden;
border:1px solid;
}
.tooltip:hover:after {
background: rgba(0, 0, 0, .8);
color: #fff;
margin-top:-30px;
border-radius: 15px;
content: attr(alt);
padding: 5px 15px;
position: fixed;
z-index:999;
}
<table>
<tr>
<td>
<span alt="fullWriting" class="tooltip">partiallyHiddenWriting</span>
</td>
</tr>
</table>
Some usefull links to understand the effect of transform on fixed position :
Why does `transform` break `position: fixed`?
https://stackoverflow.com/a/37953806/8620333
I'm fairly new to HTML and CSS and I've been trying to figure out how to center this div class called .content in the middle of the page that is wrapped around my table data. I have googled around and what I have found is that I should set the left margin to 0 and the right margin to auto but what I get when I do this is the entire table stays on the left side of the page.
Right now I have the margin-left at 500px trying to to get it close to the center of the page but I think if I do it this way it will not be centered on other screens with different resolutions and I would like for it to be centered no matter what the screen size is.
HTML
<body>
<h1>Table</h1>
<div class="content">
<table>
<tr>
<th>Data</th>
<th>Data 2</th>
<th>Data 3</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
</table>
</div>
</body>
CSS
body {
border: 1px;
border-color: black;
border-style: dashed;
}
h1 {
border: 1px;
border-color: green;
border-style: dashed;
color: red;
text-align: center;
}
.content {
border: 1px;
border-color: orange;
border-style: dashed;
color: red;
display: inline-block;
margin_right: auto;
margin-left: 500px;
text-align: center;
}
.content th {
border: 1px;
border-color: green;
border-style: dashed;
}
.content td {
border: 1px;
border-color: red;
border-style: dashed;
color: blue;
}
Since your .content does not have a fixed width you cannot use margin:0px auto which would center the content. In your case u can just it on the table element like this:
table{
margin:0px auto;
}
but you need to remove display:inline-block from .content for this to work.
Centering means equal margins from left and right. Therefore, side margins should be set to auto, like so:
.content {margin: 0 auto}
...where 0 is the margins from top AND bottom and auto are margins from left AND right
I'd remove inline-block from there as well.
Update .content as
.content {
display: inline-block;
border: 1px;
border-style:dashed;
border-color: orange;
color: red;
text-align: center;
margin-left:auto; #make this as auto
margin-right: auto;
}
However this will align .content at the center horizontally, but if you want .content in center vertically then
.content{
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
In your case in particular, the best solution is to adjust the two "margin" properties inside your .content class declaration from:
margin-left:500px;
margin_right: auto;
To:
margin-left:auto; margin-right:auto;
Be aware that "margin_right" needs to have a hyphen ('-') not an underscore.
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)
}