Отобразите детали в виде таблицы в модальном всплывающем окне с правильным стилем, используя код C#

Question

C# код

  [WebMethod(EnableSession = true)]
     public static string getLineChartData2(string projno)
        {

            Customer3 com = new Customer3();

            SqlConnection connection = new SqlConnection(ConfigurationManager.ConnectionStrings["DashBoardDB2"].ToString());
            connection.Open();
            SqlCommand sqlcmd = new SqlCommand("uspTaskProgress", connection);
            sqlcmd.CommandType = CommandType.StoredProcedure;
            sqlcmd.Parameters.Add(new SqlParameter("@ProjectNo", projno));
            SqlDataAdapter adp = new SqlDataAdapter(sqlcmd);

            DataSet dt = new DataSet();
            adp.Fill(dt);

            connection.Close();

            StringBuilder str = new StringBuilder();
            str.Append("<table id='Table1' border='1'>");
            str.Append("<tr>");
            str.Append("<th>ProjectNo</th>");
            str.Append("<th>Module</th>");
            str.Append("<th>subModule</th>");
            str.Append("<th>Process</th>");
            str.Append("<th>PlannedStart</th>");
            str.Append("<th>PlannedEnd</th>");
            str.Append("<th>Task</th>");
            str.Append("<th>Resource</th>");

            for (int i = 0; i < dt.Tables[0].Rows.Count; i++)
            {
                str.Append("<tr>");
                str.Append("<td>" + dt.Tables[0].Rows[i]["ProjectNo"].ToString() + "</td>");
                str.Append("<td>" + dt.Tables[0].Rows[i]["Module"].ToString() + "</td>");
                str.Append("<td>" + dt.Tables[0].Rows[i]["subModule"].ToString() + "</td>");
                str.Append("<td>" + dt.Tables[0].Rows[i]["Process"].ToString() + "</td>");
                str.Append("<td>" + dt.Tables[0].Rows[i]["PlannedStart"].ToString() + "</td>");
                str.Append("<td>" + dt.Tables[0].Rows[i]["PlannedEnd"].ToString() + "</td>");
                str.Append("<td>" + dt.Tables[0].Rows[i]["Task"].ToString() + "</td>");
                str.Append("<td>" + dt.Tables[0].Rows[i]["Resource"].ToString() + "</td>");

                str.Append("</tr > "); ;
            }
            str.Append("</tr></table>");
            return str.ToString();
        }



        public class Customer3
        {

        }


        /* chart click   */

    }

Модальное всплывающее окно "Ход выполнения задачи"

asp.net code

 <!-- Modal -->
   <div class="modal fade" id="demoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
       <div class="modal-dialog">
            <div class="modal-content">
                  <div class="modal-header">
                         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                         <h4 class="modal-title" id="myModalLabel">Task Progress Indicator</h4>
                   </div>
                    <div class="modal-body">Task Progress Indicator</div>

                    <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                   <%-- <button type="button" class="btn btn-primary">Save changes</button>--%>
                    </div>
            </div>
        </div>
 </div>

javascript

 plotOptions: {
                    series: {
                            point: {
                                events: {

                                    click: function (event) {
                                        console.log(event);
                                        $('#demoModal').modal('show');

                                         var projno = "P-2020-0007";

                                            $.ajax({
                                                type: "POST",
                                                dataType: "json",
                                                contentType: "application/json; charset=utf-8",
                                                url: "TaskProgress.aspx/getLineChartData2",

                                                data: "{'projno':'" + projno + "'}",

                                                success: OnSuccess,
                                                error: OnErrorCall_


                                            });

                                            function OnSuccess(response) {

                                                $("#demoModal").html(response.d);
                                            }


                                    }

                                }
                            }
                    }
                }

См. Прикрепленный снимок экрана с выводом

В модальном всплывающем окне вывод не выровнен должным образом. Пожалуйста, предложите исправить эту ошибку.

Исходный экран: После щелчка по прогрессу задачи открывается модальное всплывающее окно на Отображение для l oop данных из кода в jQuery Модальное окно . Но на приведенном выше скриншоте вывод нечеткий и видимый