I have a table, which is put inside a div. And this table has 4 td elements and inside each td element, there are 3 div stacked from top to bottom. My goal is to make the third div positioned at the bottom of the table. CSS below:
tr {
height: 220px;
}
td {
position: relative;
}
third-div {
text-align: center;
position: absolute:
left: 0;
right: 0;
bottom: 0;
}
html image
it works fine in firefox and chrome but bottom:0 in IE11 does not work correctly, I got a text overlay issue:(the number in the third div, which is 2000, is not set at the bottom of the table)
html rendered in IE
what is expected is:
html rendered in Chrome
I tried to set the height to auto/100%, did not work. I manually clicked bottom:0 in developer tool, it worked, 2000 went to the bottom. (not sure why).
The class name of the div in html is third-div, but you use 3rd-div in CSS and lack of a selector for the style rule. I made a demo like below and it can work well in both IE 11 and Chrome:
tr {
height: 220px;
}
td {
position: relative;
}
.third-div {
text-align: center;
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
<table class="table">
<tbody>
<tr>
<td class="col-xs-3"></td>
<td class="col-xs-3"></td>
<td class="col-xs-3">
<div>Amount Financed</div>
<div>The amount of credit provided to you.</div>
<div class="third-div">
<span id="amount">$10,000</span>
</div>
</td>
<td class="col-xs-3"></td>
</tr>
</tbody>
</table>
Related
I have a simple HTML table, where one column contains images. I zoom them using
style="zoom: 31%; -moz-transform: scale(0.31); -moz-transform-origin: 0 0;"
In Chrome, for example, it works fine. Table looks as expected. In firefox, however, table row keeps its original height - as if there was no zoom applied.
CSS is not my primary expertise, so it may be a simple problem. I tried to applie all the possible values to table row "height" attribute, but nothing had any impact.
I assume the columns sizing are defined already in the examples below:
Solution 1 - background-image on parent
This solution is if you don't have access to the HTML. It simply uses the background-image-property on the td-element, and makes the background-image cover up the entire space of the td-element. You can adjust the background-position to your liking: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
td {
/* Fixed sizing for demo */
width: 200px;
height: 200px;
}
table,
td {
overflow: hidden;
}
td.bg-img {
background-image: url('http://via.placeholder.com/640x360');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
<h1>Solution 1</h1>
<table>
<tr style="background-color: red">
<td></td>
<td class="bg-img"></td>
<td></td>
</tr>
</table>
Solution 2 - background-image on child
This solution is similiar to the one above, but has the background-image attached to another child element of the td-element. width: 100%; + height: 100%; lets the child element take the full size of its parent element. By then applying transform: scale(1.31);, the element will be zoomed in (by 31%), and with overflow: hidden; applied to td and table, the images zoom effect is visible and there is no overflow pre.
td {
/* Fixed sizing for demo */
width: 200px;
height: 200px;
}
table,
td {
overflow: hidden;
}
.img-child {
width: 100%;
height: 100%;
background-image: url("http://via.placeholder.com/640x360");
background-position: center;
background-size: cover;
transform: scale(1.31);
}
<h1>Solution 2</h1>
<table>
<tr style="background-color: red">
<td></td>
<td class="img">
<div class="img-child"></div>
</td>
<td></td>
</tr>
</table>
Solution 3 - img-element
If you have access to the HTML or if you care about semantic value, this solution uses the img-element. Similiar to the ones above, but uses object-fit + object-position instead of background. You can also adjust the object-position to your liking: https://developer.mozilla.org/en-US/docs/Web/CSS/object-position
td {
/* Fixed sizing for demo */
width: 200px;
height: 200px;
}
table,
td {
overflow: hidden;
}
/* Solution 3 */
.img-src {
display: flex;
}
.img-src img {
max-width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
transform: scale(1.31);
}
<h1>Solution 3</h1>
<table>
<tr style="background-color: red">
<td></td>
<td class="img-src"><img src="http://via.placeholder.com/640x360"></td>
<td></td>
</tr>
</table>
I am trying to make a table with a "sticky" table header. I set the position to absolute and it works, but now the header overflows horizontally past the table borders and even covers the scrollbar. How can I make an element absolute but still visually contained by its parent element?
It's hard to accurately display my code because I'm trying to modify Kibana and there are many different files involved but here is my best attempt at a simplified example:
HTML:
<div>
<table>
<thead>
<tr class="headerRow">
<th>...</th>
...
</tr>
<tr class="headerRowInvisible">
<th>...</th>
...
</tr>
</thead>
<tbody>...</tbody>
</table>
</div>
CSS:
div {
z-index: auto;
flex: 1;
display: flex;
flex-direction: column;
height: 100%;
min-height: 26px;
position: relative;
}
table {
width: 100%;
max-width: 100%;
margin-bottom: 20px;
border-collapse: collapse;
border-spacing: 0;
}
.headerRow {
white-space: nowrap;
position: absolute;
background-color: white;
z-index: 50;
}
.headerRowInvisible {
white-space: nowrap;
visibility: hidden;
}
If you're wondering about the invisible <tr>, setting the position to absolute messed with the formatting of the rest of the table and overlapped with the top of it, so I created an invisible <tr> with normal positioning so that it would create space and provide correct column widths to the table body. The background and z-index is so that the sticky header will properly cover the body when you scroll down. Otherwise you get text on top of text and it looks jumbled.
Use top, right and left properties to adjust the placement of that absolutely positioned element, and use margin-top on the next non-absolutely positioned element below it to create some space in order to avoid overlapping.
Please go to my site here:
http://35.232.230.0:81/
You'll see a table of catalog items. Hover over one of the images. You should see the image enlarge.
You might also notice the image flickers a bit. This happens when you hover the mouse over the upper portion of the thumbnail.
The reason this is happening is because, as you'll notice, the top edge of the enlarged image is position around the middle of the thumbnail image. This means that when the image enlarges, the mouse is positioned just above the enlarged image. This means that as soon as you move the mouse, it detects that as a mouseout event, which causes the image to shrink again. But this in turn triggers the enlargement because the mouse is still hovering over the thumbnail image. This results is a cycle of enlarging and shrink which, when seen really fast, gives you the flicker.
So I'm wondering if there's a way to force the top of the enlarged image to be the same as the thumbnail image.
The hover event causes a css transition where the class being transitioned to sets the image's position to absolute:
img {
transition: width 0;
&:hover {
position: absolute;
z-index: 100;
width: 300px;
border: 1px solid black;
box-shadow: 5px 5px 10px grey;
transition: width .2s linear;
}
}
I would try to adjust the enlarge image's top property by setting it to 0, but with position: absolute, this just results in the image being positioned at the top left corner of the screen. I'm not sure how to calculate the position in CSS relative to its containing element (a td in a angular mat-table), so I'm a bit at a loss as to how to do this.
Any help would be much appreciated. Thanks.
First, for position: absolute to achieve your desired effect, you'd need to have positioned parent it can relate to (anything that is not position: static).
That means setting position: relative on the containing <td> should work. But alas, it doesn't. :( That is because relative position on table cells is undefined and most browser don't handle it very well. Bummer.
So, your best bet is to wrap your image with a <div> (or something similar) with position: relative set like in the following example.
table {
border-collapse: collapse;
}
table th,
table td {
padding: 5px;
}
table td {
border-top: 1px solid;
}
div {
height: 100px;
position: relative;
width: 100px;
}
img {
border: 1px solid transparent;
height: auto;
position: absolute;
transition: width .2s linear;
width: 100px;
z-index: 100;
}
img:hover {
border-color: #000;
box-shadow: 5px 5px 10px grey;
width: 400px;
z-index: 110;
}
<table>
<tr>
<th>Name</th>
<th>Image</th>
<th>Description</th>
</tr>
<tr>
<td>Name</td>
<td>
<div>
<img src="https://dummyimage.com/400x400/f48224/fff" alt>
</div>
</td>
<td>Description</td>
</tr>
<tr>
<td>Name</td>
<td>
<div>
<img src="https://dummyimage.com/400x400/f48224/fff" alt>
</div>
</td>
<td>Description</td>
</tr>
<tr>
<td>Name</td>
<td>
<div>
<img src="https://dummyimage.com/400x400/f48224/fff" alt>
</div>
</td>
<td>Description</td>
</tr>
</table>
Another solution might be to work with CSS transforms (scale), since those don't alter the element's document flow.
For example I have some kind of table:
<table>
<tr>
<th><div>Title1</div></th>
<th><div>Title2</div></th>
</tr>
<tr>
<td><div>Body1</div></td>
<td><div>Body2</div></td>
<tr>
</table>
I want every th column be resizeable, so I add some CSS:
th > div {
resize: horizontal;
overflow: hidden;
}
Everything working fine, every column can be resized horizontally.
Problem is that in every <th> I have an icon for resizing. I want it to be hidden. Is there anyway to do this?
Here are three possible solutions:
Use the ::webkit-resizer psuedo selector to style the resizer
Use a :after psuedo element to 'hide' the resizer (and add a custom cursor)
Use the :hover psuedo class to add the resize only on :hover
1. It's not cross-browser compliant, but might work for you - the ::-webkit-resizer selector. This allows some basic control over the styling of the resizer icon. We can make it transparent with the following:
(this will only work in Safari)
th > div,
td > div {
resize: horizontal;
overflow: hidden;
text-align: left;
}
td > div::-webkit-resizer {
background-color: transparent;
}
<strong>The `::-webkit-resizer` selector only works in Safari</strong>
<br/><br/>
<table>
<tr>
<th><div>Title1</div></th>
<th><div>Title2</div></th>
</tr>
<tr>
<td><div>Body1</div></td>
<td><div>Body2</div></td>
<tr>
</table>
2. As a more cross-browser solution, we can 'hide' the resizer icon behind a :after psuedo element. The idea here is to create an :after element that sits in the bottom-right corner of the td > div elements (on top of the resizer icon) with a background color that matches the table cell background color. The only remaining change is to add a small amount of padding to the right-side of the cells so the :after psuedo element doesn't also cover the cell contents.
The main advantage of this option is we can add the custom cursor you mentioned you wanted. Using the td > div:hover:after selector we can apply a cursor when the right-side of the resizable table cells is on :hover. Like this:
Like this:
th > div,
td > div {
resize: horizontal;
overflow: hidden;
text-align: left;
position: relative;
padding: 0 8px 0 0;
min-width: 45px;
}
td > div:after {
content: "";
display: block;
position: absolute;
bottom: 0px;
right: 0px;
background-color: white;
width: 8px;
height: 100%;
}
td > div:hover:after {
cursor: col-resize;
}
<table>
<tr>
<th>
<div>Title1</div>
</th>
<th>
<div>Title2</div>
</th>
</tr>
<tr>
<td>
<div>Body1</div>
</td>
<td>
<div>Body2</div>
</td>
<tr>
</table>
3. If we want the cells to be resizable, hide the resize element, and make it obvious the elements are resizable, we can use the :hover psuedo class.
Through some experimenting I found this solution works best if you use both :hover and :active pseudo classes, or the handle on the resize is lost if the cursor is dragged too quickly.
th > div {
resize: horizontal;
overflow: hidden;
text-align: left;
}
td > div {
padding-right: 10px;
min-width: 40px;
}
td > div:hover,
td > div:active {
resize: horizontal;
overflow: hidden;
}
<strong>The `::-webkit-resizer` selector only works in Safari</strong>
<br/><br/>
<table>
<tr>
<th><div>Title1</div></th>
<th><div>Title2</div></th>
</tr>
<tr>
<td><div>Body1</div></td>
<td><div>Body2</div></td>
<tr>
</table>
If you want to remove the icon from each and every td just use th > div selector.
See the example below:
If you want to play with that resize icon: Here
th > div{
resize: horizontal;
overflow: hidden;
}
<table>
<tr>
<th><div>Title1</div></th>
<th><div>Title2</div></th>
</tr>
<tr>
<td><div>Body1</div></td>
<td><div>Body2</div></td>
<tr>
</table>
I am trying to append some content to a th container where the text is centered. I want the new content to be at the very right of the container, and keep the current text centered.
|--------content--------|
to
|--------content-------a|
where a is the new content.
I have seen a couple of similar posts, but can't find one that is relevant. I can easily do a float left , right, clear both to keep a on the right and content on the left, but I specifically want to keep content where it is. Also, I don't want content to be shifted to the left due to the presence of a if possible.
Try the following. Use position: relative on the th and then use absolute positioning for the appended element, b in my example.
table {
border: 1px dotted blue;
width: 100%;
}
table th {
position: relative;
}
table th div {
position: absolute;
top: 0;
right: 0;
border: 1px dotted gray;
color: red;
}
<table>
<tr>
<th>Centered Content <div>A</div></th>
</tr>
</table>
I think this is what you need.
<table width="200px" border="1">
<tbody>
<th> <span style=" text-align:center;">content </span><span style="float:right;">1</span>
</th>
</tbody>
</table>