xxxxxxxxxx
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Table With Border</h2>
<p>Use the CSS border property to add a border to the table.</p>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
xxxxxxxxxx
/*For collapsed boarders*/
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
xxxxxxxxxx
<table border="2" style="border-collapse:collapse;">
<tbody>
<tr>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
</tbody>
</table>
xxxxxxxxxx
/*For collapsed boarders*/
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
xxxxxxxxxx
<style>
.table-bordered {
border: 1.3px solid black !important;
}
th,td{
border: 1.5px solid black !important;
}
</style>
xxxxxxxxxx
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
You can adjust the size and style of the border by specifying a different value for the "border" attribute. For example, "border=2" will create a thicker border than "border=1". You can also use CSS to style the border of the table in more detail.
xxxxxxxxxx
// serverOperation must be false
// on the column description add
.Sortable(s => s.Compare('jsFunc'));
// the function returns a normal sort function
const jsFunc = (a, b, desc) => {
if (desc) {
return b.field > a.field ? -1 : b.field > a.field ? 1 : 0;
}
return a.field < b.field ? -1 : a.field < b.field ? 1 : 0;
}