user3079275 user3079275 - 3 months ago 9
CSS Question

Table alignment with div

I am trying to construct an html table with 6 rows. The first row has one line of text which is heading. The second row has 3 columns (set as three td elements). Third row has three values in 3 columns (set as three td elements). 4th row has 3 images in 3 columns (again set as three td elements). This works correctly so far. Now I want to add a fifth row which is a line of text that spans the entire div and has a dotted underline. When I add this element it just draws the the dotted border to 1/3rd of the div only. If I set the width to 100%, the elements above it are dragged to the right of the screen. What am I doing wrong? Here is my 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>

Answer

You're trying to make the last two tr's span all the 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