html - How to align text input with sorting button inside <td>? -
i'm having bad time trying align clickable element on right of text <input>
element. wouldn't problem if have fixed dimensions, <input>
inside of container variable size. resizing made js function. need place clickable element on far right, inside <td>
and, remaining space filled 100% <input>
. @ moment i'm totally confused , cannot come clean solution doesn't involve nested tables inside table cell.
at moment, clickable <a>
tag, i'm not sure if that's best approach. need clear advice right now.
here basic code:
<html> <head> <style type="text/css"> table{border-collapse:collapse;} td{ border: 1px solid black; padding: 2px; } .container{ width: 100px;/*this dinamically resized js*/ } input[type="text"]{ width: 100%; } </style> </head> <body> <table> <thead> <tr> <td> <div class="container"> <input type="text"><a href="#" onclick="/*call myfunc*/" >▲</a> </div> </td> </tr> </thead> <tbody> <tr> <td> data1 </td> </tr> </tbody> </table> </body> </html>
float clickable element right, wrap input
division , set margin-right
it:
css:
input[type="text"] { width: 100%; } .wrapper { margin-right: 25px; } .clickable { float: right; }
html:
<a class="clickable" href="#" onclick="/*call myfunc*/" >▲</a> <div class="wrapper"> <input type="text"> </div>
Comments
Post a Comment