How can I get content in html table cell when there is some other content?
I have content centered and content that floats to the right, and I just realized that the centered text is shifted to the left due to the content of float: right.
The center text uses this css:
.tableCell {
text-align: center;
}
.floatRight img
{
float:right;
cursor: pointer;
}
and here is the HTML:
<td class="tableCell" id="697">
<span class="floatRight">
<img src="/arrow.png">
</span>
<b>1006</b><hr>Some Text<br>Some other text
</td>
Anyway, there is content inside the table cell that is centered and the horizontal position is not affected by float: right text?
+3
source to share
2 answers
A simple way to do this is to use absolute positioning on the float arrow icon / image as shown below.
The vertical placement of the arrow may take a while, depending on what the rest of the design looks like.
table {
border: 1px dotted blue;
}
.tableCell {
text-align: center;
position: relative;
}
.tableCell:hover > .floatRight
{
opacity:1;
}
.floatRight {
position: absolute;
top: 0;
right: 0;
opacity:0;
transition: opacity ease-in-out 1s;
}
<table>
<tr>
<td class="tableCell">
<span class="floatRight">
<img src="http://placehold.it/20x20">
</span>
<b>1006</b>
<hr>Some Text
<br>Some other text
</td>
</tr>
</table>
+1
source to share