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

Popular posts from this blog

amazon web services - S3 Pre-signed POST validate file type? -

c# - Check Keyboard Input Winforms -