html - Table alignment with div -
i trying construct html table 6 rows. first row has 1 line of text heading. second row has 3 columns (set 3 td elements). third row has 3 values in 3 columns (set 3 td elements). 4th row has 3 images in 3 columns (again set 3 td elements). works correctly far. want add fifth row line of text spans entire div , has dotted underline. when add element draws the dotted border 1/3rd of div only. if set width 100%, elements above dragged right of screen. doing wrong? here complete html snippet:
<div id="toysummary" style="border:solid; border-width:4px; border-color:gray; padding:4px; margin:10px"> <span style="font-family:calibri; font-size:large; color:midnightblue; text-align:right"><b>final results summary</b></span> <table style="width:100%"> <tr> <td style="width:33%; font-size:large"><i>result</i></td> <td style="width:33%; font-size:large"><i>lucky toy</i></td> <td style="width:33%; font-size:large"><i>lucky peoples</i> </td> </tr> <tr> <td style="width:33%; font-size:large">{{overall_result}}</td> <td style="width:33%; font-size:large">{{lucky}}</td> <td style="width:33%; font-size:large">{{lucky_peoples}}</td> </tr> <tr> <td><img src={{some_png}} style="width:50px;height:50px;"></td> <td><img src={{some_other_png}} style="width:50px;height:50px;"></td> <td><img src={{another_png}} style="width:50px;height:50px;"></td> </tr> <tr> <td style=" border-bottom-style:dotted; border-bottom-color: black; border-bottom-width: 2px;"><b><em>{{animal_test_note}}</em></b></td> </tr> <tr> <td>{{toy_score_note}}</td> </tr> </table> </div>
you're trying make last 2 tr's span columns? try this
<tr> <td colspan="3" style=" border-bottom-style:dotted; border-bottom-color: black; border-bottom-width: 2px;"><b><em>{{animal_test_note}}</em></b></td> </tr> <tr> <td colspan="3">{{toy_score_note}}</td> </tr>
Comments
Post a Comment