SOLVED by P. Leger:
In my CSS I simply added/changed the vertical-align to top.
This worked for me
I am developing a simple schedule where the admin can manage users and add users to a specific date.
I want the ‘+’ icon at the top of <td>
inside a <table>
.
Because if there are 3 people planned in on Monday and there are 2 people planned in on thuesday, the icons will be outlined by each other.
You see the red line is straight if there are an equally number of values in a table
This is how I want it (photoshopped):
The red lines are in all rows straight.
The red lines are just an indication on how I want it to be (because in real they aren’t there of course).
My code right now inside the <td></td>
:
echo '<a href="../rooster/add_rooster.php?week='.$weekrow.'&day='.$day.'&daynmb='.$day_numb.'"><img src="../rooster/images/add.png" width="15" align="left" class="imgtable"></a><br/>
</div>';
And the class imgtable:
.imgtable {
float:top;
}
I tried every position and float. But I just need something that the image is fixed inside the table.
Currently I am just using a simple image, but I prefer using a font awesome icon.
I hope that you will understand my question.
Thanks for reading
2
Answers
Just position the icon absolutely and make sure the cell (, or whatever the icon’s parent is) is positioned relatively. Then you can position the icon with left/right, and top/bottom.
that should position them all in the same spot relative to their parent (the table cell).
Example: https://jsfiddle.net/silvertail/cej23cbh/
There is no
float: top
.I think, you don’t want the
<a ...><img src=... /></a>
fixed, but at the top of<td>
. Therefore you have to access the<table>
id or class. And from there the<td>
. And setvertical-align: top
.HTML
CSS
Example