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>
Related
I have a TD with contents often wider than the TD, a text-align of right, and an overflow-x of hidden. It is displaying the leftmost portion of its contents.
Let us say for the sake of argument that the cell content is "ABCDEFGHIJKLMNOPQRSTUVWXYZ", and the TD will show exactly six characters with a hidden overflow-x.
It is now showing "ABCDEF".
How can I show "UVWXYZ"?
You can use direction: rtl.
td {
border: 1px solid black;
max-width: 70px;
overflow-x: hidden;
direction: rtl;
/*text-align: right;*/
}
<table>
<tr>
<td>ABC</td>
<td>ABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
</tr>
</table>
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.
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>
Please see the following example:
http://jsfiddle.net/6t6hq/7/
when I use td with position relative to move it,
it only move the content but not the border.
How can I move the border with the content?
<table>
<tr>
<td id="relativeTD">1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<div id="expected">expected</div>
<style>
td{
border:1px solid #000;
min-width:100px;
}
#relativeTD{
position:relative;
left:60px;
}
#expected{
border:1px solid #000;
position:relative;
left:60px;
}
</style>
TD is of display: table-cell;!
So you can't move it using relative positioning. Instead, create another <div> inside the <td> and give border and stuff.
Instead, give position: absolute for the td. It works! Also, you need to give position: relative to the table.
Fiddle: http://jsfiddle.net/6t6hq/9/
Else, you can use margin-left too to the td.
You cannot move a single td border you need to move the whole table
Demo
table {
margin-left: 60px;
}
Either what you can do is give your table border: 0;, place a div inside your td
give it some width, border and position: relative with left: 60px; and you are good to go
I have a table set to 100% width. I will add a random div with php full of ads at times. I want the ad div to be on the right and the content of the table. I want the table to be on the left but still at 100% or so it will fill all the space to the left of the ad div.
In short, so when the div is not present the table will fill 100% width.
When the div is present the div will be on the right side of the table at a set width of 300px.
Here is the style for the div
.ContentAds {
float: right;
height: 100%;
width: 300px;
display: block;
clear: none;
}
The table is not a div but simply set to 100% width.
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td><p class="Title">Title</p>
<p>This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content.. </p></td>
</tr>
</table>
For now I can only suggest to wrap your table with a positioned div. But I can't be sure that it will be sufficient to you cause you provided rather small amount of code
jsfiddle
<div class="ad">
advertise... advertise
advertise... advertise
advertise... advertise
</div>
<div class="table_wr">
<table>
<tr>
<td>
<p class="Title">Title</p>
<p>
This is the content. This is the content.
This is the content. This is the content.
This is the content. This is the content.
This is the content. This is the content..
</p>
</td>
</tr>
</table>
</div>
CSS
body {
position: relative;
}
table {
border: 1px solid black;
width: 100%;
}
.ad {
float:right;
width:300px;
height: 500px;
background-color: #a2e89f;
}
.table_wr {
position: absolute;
left: 0;
right: 300px;
}
border is set for table for you can see where table stretches
I think this won't work unless you give the table a smaller set width when the other DIV is present then you could float it to the left too.
Perhaps you could have the table set to be 100% then when the other DIV is there you add a class onto the table which adjusts the width and floats it?