Выравнивание таблицы с div

Question

Я пытаюсь построить таблицу html с 6 строками. В первой строке есть одна строка текста, которая загорается. Вторая строка имеет 3 столбца (заданные как три элемента td). Третья строка имеет три значения в трех столбцах (задано как три элемента td). 4-я строка имеет 3 изображения в 3 столбцах (опять же задано как три элемента td). До сих пор это работает правильно. Теперь я хочу добавить пятую строку, которая представляет собой строку текста, которая охватывает весь div и имеет пунктирную подчеркивание. Когда я добавляю этот элемент, он просто рисует пунктирную границу только с 1/3 из div. Если я устанавливаю ширину на 100%, элементы над ней перетаскиваются вправо от экрана. Что я делаю не так? Вот мой полный HTML-фрагмент:

<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 1

Вы пытаетесь сделать последние два треугольника tr всеми столбцами? Попробуйте это

<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> 

Answer 2

Используйте атрибут colspan внутри, чтобы охватить ур пунктирной рамкой по всем столбцам.

{{}} animal_test_note

Answer 3

Когда я правильно Вас понял, вы пытаетесь выровнять пунктирную нижнюю границу к вашей пятой td клетки? И каждая попытка идет не так и не охватывает всю нижнюю строку?

Я бы рекомендовал использовать классы CSS и идентификаторы вместо написания части стиля непосредственно в тегах td. Это грязное кодирование! Без обид!

И для подхода:

HTML часть:

<td id="dotted"> 

CSS часть:

#dotted { 
    border-bottom: dotted #000000; /* or any colour you prefer! */ 
    width:100%; 
} 

Кстати: используя % и затем px в ваших td тегов может вызвать проблему придерживайтесь одного.

, который должен исправить это

Answer 4

<td colspan="3" style=" border-bottom-style:dotted; border-bottom-color: black; border-bottom-width: 2px;"><b><em>{{animal_test_note}}</em></b></td> 

это исправить.