Hi sani.ss501,
To solve this issue you need to add non-breaking space: before the value of the td element.
Refer below example.
Model
public class CustomerModel
{
public string CustomerId { get; set; }
public string Name { get; set; }
public string Country { get; set; }
}
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
List<CustomerModel> customers = new List<CustomerModel>();
customers.Add(new CustomerModel { CustomerId = "001", Name = "John Hammond", Country = "United States" });
customers.Add(new CustomerModel { CustomerId = "002", Name = "Mudassar Khan", Country = "India" });
customers.Add(new CustomerModel { CustomerId = "003", Name = "Suzanne Mathews", Country = "France" });
customers.Add(new CustomerModel { CustomerId = "004", Name = "Robert Schidner", Country = "Russia" });
return View(customers);
}
}
View
@model IEnumerable<Export_Table_Excel_jQuery_MVC.Models.CustomerModel>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<table id="tblCustomers" class="table" cellpadding="0" cellspacing="0">
<tr>
<th style="width:80px">Customer Id</th>
<th style="width:120px">Name</th>
<th style="width:100px">Country</th>
</tr>
@foreach (Export_Table_Excel_jQuery_MVC.Models.CustomerModel customer in Model)
{
<tr>
<td class="CustomerId"> @customer.CustomerId</td>
<td class="Name">@customer.Name</td>
<td class="Country">@customer.Country</td>
</tr>
}
</table>
<br />
<input type="submit" id="btnExport" value="Export" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="~/Scripts/table2excel.js"></script>
<script type="text/javascript">
$(function () {
$("#btnExport").click(function () {
$("#tblCustomers").table2excel({
filename: "Table.xls"
});
});
});
</script>
</body>
</html>
Screenshot
