HTML CSS table row height not working -
i want upper table row have size of kid div (cp2), couldn't command height. tried modifying margin, padding, height, tables table-layout css-attribute, doesn't want work.
code:
<!doctype html> <html> <head> <style> .cp1{ display: inline-block; width: 32px; height: 32px; background-color: red; vertical-align: top; } .cp2{ display: inline-block; width: 128px; height: 10px; background-color: black; vertical-align: top; margin:0px; margin-left: 10px; } .out{ display: inline-block; width: 3em; height: 1.2em; background-color: red; vertical-align: top; margin-left: 10px; } td,tr{ padding: 0px; margin:0px; } table{ border: 0px; table-layout:fixed; } .in{ height: 1.2em; padding: 0px; margin-left: 10px; vertical-align: top; } </style> </head> <body> <table> <tr> <td rowspan="2"> <input type="checkbox">cb1 <br/> </td> <td rowspan="2" style="padding-left: 10px;"> <div class="cp1"></div> </td> <td style="height: 1px;"> <div class="cp2"></div> </td> </tr> <tr> <td> <div class="out"></div><input class="in" type="text" size="3"> </td> </tr> </table> </body> </html> thanks
instead of <td style="height: 1px;"> set <td style="font-size: 10px;">, , may have add together line-height: 0px.
html css table
No comments:
Post a Comment