Hi ali.a.ali,

Here i have created sample that full fill your requirement using the below article.

Display DataTable in HTML Table in ASP.Net using C# and VB.Net

HTML

<asp:PlaceHolder ID="PlaceHolder1" runat="server" />
<br />
<div id="dialog" style="display: none">
    <b>Customer Id:</b> <span id="customerId"></span>
    <br />
    <b>Name:</b> <span id="name"></span>
    <br />
    <b>Country:</b> <span id="country"></span>
</div>
<br />
<div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js"></script>
    <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css" />
    <script type="text/javascript">
        $(document).on("click", "[id*=btnDetails]", function () {
            var custId = $('td', $(this).closest("tr")).eq(0).html();
            var name = $('td', $(this).closest("tr")).eq(1).html();
            var country = $('td', $(this).closest("tr")).eq(2).html();
            $("#customerId").html(custId);
            $("#name").html(name);
            $("#country").html(country);
            $("#dialog").dialog({
                title: "View Details",
                buttons: {
                    Ok: function () {
                        $(this).dialog('close');
                    }
                },
                modal: true
            });
            return false;
        });
    </script>
</div>

Code

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = this.GetData();
        StringBuilder html = new StringBuilder();
        html.Append("<table border = '1'>");
        html.Append("<tr>");
        foreach (DataColumn column in dt.Columns)
        {
            html.Append("<th>");
            html.Append(column.ColumnName);
            html.Append("</th>");
        }
        html.Append("<th>Details</tr>");
        int i = 0;
        foreach (DataRow row in dt.Rows)
        {
            html.Append("<tr>");
            foreach (DataColumn column in dt.Columns)
            {
                html.Append("<td>");
                html.Append(row[column.ColumnName]);
                html.Append("</td>");
            }
            html.Append("<td>");
            html.Append("<input type=\"button\" name=\"btnDetails\" value=\"View Details\" id=\"btnDetails\" />");
            i++;
            html.Append("</td>");
            html.Append("</tr>");
        }
        html.Append("</table>");
        PlaceHolder1.Controls.Add(new Literal { Text = html.ToString() });
    }
}

private DataTable GetData()
{
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand("SELECT CustomerId, Name, Country FROM Customers"))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter())
            {
                cmd.Connection = con;
                sda.SelectCommand = cmd;
                using (DataTable dt = new DataTable())
                {
                    sda.Fill(dt);
                    return dt;
                }
            }
        }
    }
}

Screenshot