What's new
HTML Forums | An HTML and CSS Coding Community

Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!

Creating html table with fixed header and scrolling rows

rtalasila

New member
I have the following Linux shell script (CentOS). Which retrieves the rows from the back end system and emails the report in HTML table format. I want to make this report to be an HTML table with a fixed header and scrollable body (The rows are dynamic depending on the query). Right now I am able to generate the HTML table and email it out. I ned some help from your end making this report viewable in the email in HTML table with fixed header

Thanks in advance for your help and time.

From back end system my query retrives rows with 4 columns and outputs to .csv file. Columns are "Column-1","Column-2",Column-3,Column-4,Column-5

# Now create an html file from the CSV file
( echo "<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
@charset "UTF-8";

table
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse:collapse;
}
td
{
font-size:1em;
border:1px solid #98bf21;
padding:5px 5px 5px 5px;
}
th
{
font-size:1.2em;
text-align:center;
padding-top:5px;
padding-bottom:5px;
padding-right:7px;
padding-left:7px;
background-color:#A7C942;
color:#ffffff;
}
tr
{
color:#F00000;
background-color:#EAF2D3;
}
</style>
</head>
<body>
<h2 Style="color:#0000FF">XYZ Report</h2>
<h4>Report Generated on `date`</h4>
<table>
<TR>
<TH>Column-1</TH>
<TH>Column-2</TH>
<TH>Column-3</TH>
<TH>Column-4</TH>
<TH>Column-5</TH>
</TR>"

awk -F',' '$1!="Name"{print "<TR><TD>",$1,"</TD><TD>",$2,"</TD><TD>",$3,"</TD><TD>",$4,"</TD><TD>",$5,"</TD></TR>"}' $csv_file

echo "</table>
</body>
</html>" ) > $html_file

# Send the resulting file
send_email
 
Try this:

div class="table-wrapper">
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
</tbody>
</table>
</div>

Let me know if this works.

Admin,
CloudDesktopOnline
 
Back
Top