JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<DIV ID="flushme" style="display: inline">
<h1>The report is beeing generated. This might take a while...</h1>
</DIV>
<pre>
<TITLE>Show All Events Generated Today.</TITLE>
<link rel="stylesheet" type="text/css" href="tablestyle.css">
<BODY BGCOLOR="#EFEFFF">
<TABLE class="DataTable">
<TR>
<TH COLSPAN="2" ALIGN="CENTER">Show All Events Generated Today.</TH>
</TR>
</TABLE>
<TABLE class="DataTable" border="1" cellpadding="5" cellspacing="3" width=100% >
<TR>
<TH>Message</TH>
<TH>Count</TH>
<TH>EventLog</TH>
<TH>EventID</TH>
<TH>EventType</TH>
<TH>EventTypeName</TH>
<TH>SourceName</TH>
</TR>
<TR>
<TD>Login succeeded for user 'NT SERVICE\ReportServer$SQLEXPRESS'. Connection made using Windows authentication. [CLIENT: <local machine>] </TD>
<TD>149</TD>
<TD>Application</TD>
<TD>18453</TD>
<TD>8</TD>
<TD>Success Audit event</TD>
<TD>MSSQL$SQLEXPRESS</TD>
</TR>
<TR>
<TD>Starting up database...
CSS
table.DataTable {
color : black;
background : #fff;
border : 1px solid #B4B4B4;
font : bold 17px Helvetica;
padding : 0;
color : #666;
border-collapse : collapse;
margin : 15px 10px 17px 10px;
vertical-align : middle;
text-align : center;
-webkit-border-radius : 8px;
width : 98%;
}
table.DataTable td {
padding : 8px 10px 8px 10px;
max-width: 300px;
overflow: auto;
text-overflow: ellipsis;
/*display: inline-block; /* or inline-block */
white-space: nowrap;
}
table.DataTable th {
color : black;
padding : 8px 10px 8px 10px;
}
table.DataTable tr {
line-heigth: 100px;
}