oK. Here is what I have so far to test on my site. I need the widget content to be 236px by 110px... for some reason it is not working... I am getting massive overflow on the side box. Anyone??? Thanks.
ob_start();
$input = 'https://www.fdic.gov/bank/individual/failed/banklist.csv';
echo "<style>
tr.row:nth-child(odd) {
background: blue;
}
tr.row:nth-child(even) {
background: black;
}
table.tBorder{
width:236; /* or what you need it to be */
height: auto; /* make this the size you want the data to be displayed in */
overflow: auto; /* this adds the scroll bars to the div when any data exceeds its hieght */
}
td.border{
width: 50%;
border-top: 1px solid #000000;
border-bottom: 0px solid #000000; /* move spacing to the cell */
}
</style>";
echo '<table class=tBorder >';
if (false !== ($ih = fopen($input, 'r')))
{
fgetcsv($ih);
while (false !== ($data = fgetcsv($ih)))
{
$outputData = array($data[0], $data[1], $data[4], $data[5]);
echo "<tr class=row >";
foreach ($outputData as $row)
{
echo "<td class=border align=center ><FONT COLOR=D3AB04 FACE=Geneva, Arial SIZE=2>" . htmlspecialchars($row) . "</FONT></td>";
}
}
}
fclose($ih);
echo '</table>';
$html = ob_get_clean();
return $html;
--------------- Added 1432407996 at 1432407996 ---------------
I found this code, but have no idea how to incorporate it into the code above... HELP...
<div id="table_wrapper">
<div id="tbody">
<table>
<tr>
<td class="td1">1</td><td class="td2">2</td><td class="td3">3</td>
</tr>
... more rows here
</table>
</div>
</div>
#table_wrapper{background:tomato;border:1px solid olive;float:left;}
#tbody{height:80px;overflow-y:auto;width:400px;background:yellow;}
table{border-collapse:collapse; width:100%;}
td{padding:1px 5px; /* pixels */
border-right:1px solid red; /* to avoid the hacks for the padding */
border-bottom:1px solid red;}
.td1{width:100px;}
.td2{width:140px;}
.td3{border-right-width:0;} /* optional */
<div id="table_wrapper">
<div id="header">
<div id="head1">Left</div>
<div id="head2">Center</div>
<div id="head3">Right Column</div>
</div>
<div id="tbody">
<table>
<tr>
<td class="td1">1</td><td class="td2">2</td><td class="td3">3</td>
</tr>
... more rows here
</table>
</div>
</div>
#header{width:400px;background:DodgerBlue;border-bottom:1px solid red;}
#header div{padding:1px 5px;float:left;border-right:1px solid orange;}
#header #head1{width:100px;} /* the same as td1 */
#header #head2{width:140px;} /* the same as td2 */
#header #head3{float:none;border-right-width:0}
Note: padding-left/right and width of the header columns.
The width of the #thead and #tbody is same.
--------------- Added 1432412880 at 1432412880 ---------------
Getting a little closer, not sure what is going on here... thanks.
ob_start();
$input = 'https://www.fdic.gov/bank/individual/failed/banklist.csv';
echo "<style>
.parentTbl table {
border-spacing: 0;
border-collapse: collapse;
border: 0;
width: 236px;
}
.childTbl table {
border-spacing: 0;
border-collapse: collapse;
border: 1px solid #d7d7d7;
width: 236px;
}
.childTbl th,
.childTbl td {
border: 1px solid #d7d7d7;
}
.scrollData {
width: 236;
height: 110px;
overflow-x: hidden;
}
tr.row:nth-child(odd) {
background: blue;
}
tr.row:nth-child(even) {
background: black;
}
/* table.tBorder{
width:250; /* or what you need it to be */
height: auto; /* make this the size you want the data to be displayed in */
overflow: auto; /* this adds the scroll bars to the div when any data exceeds its hieght */
}
td.border{
width: 50%;
border-top: 1px solid #000000;
border-bottom: 0px solid #000000; /* move spacing to the cell */
}
*/
</style>";
echo '<div class=parentTbl>';
echo '<table>';
echo '<tr>';
echo '<td>';
echo '<div class=childTbl>';
echo '<table class=childTbl>';
echo '<tr>';
echo "<th>Bank Name</th>";
echo "<th>City</th>";
echo "<th>Acq. Institution</th>";
echo "<th>Closing Date</th>";
echo '</tr>';
echo '</table>';
echo '</div>';
echo '</td>';
echo '</tr>';
echo '<tr>';
echo '<td>';
if (false !== ($ih = fopen($input, 'r')))
{
fgetcsv($ih);
while (false !== ($data = fgetcsv($ih)))
{
$outputData = array($data[0], $data[1], $data[4], $data[5]);
echo '<div class=scrollData childTbl>';
echo '<table>';
echo '<tr class=row >';
foreach ($outputData as $row)
{
echo "<td class=border align=center ><FONT COLOR=D3AB04 FACE=Geneva, Arial SIZE=2>" . htmlspecialchars($row) . "</FONT></td>";
}
echo '</tr>';
echo '</table>';
echo '</div>';
}
}
fclose($ih);
echo '</td>';
echo '</tr>';
echo '</table>';
echo '</div>';
$html = ob_get_clean();
return $html;
--------------- Added 1432435559 at 1432435559 ---------------
Ok, finally got the code to how I want it. How do I get a javascript and the php code to run in the widget box??? Thanks.
<?php
$input = 'https://www.fdic.gov/bank/individual/failed/banklist.csv';
echo "<style>
.parentTbl table {
border-spacing: 0;
border-collapse: collapse;
border: 0;
width: 220px;
table-layout: fixed
}
.childTbl table {
border-spacing: 0;
border-collapse: collapse;
border: none; /* 1px solid #d7d7d7; */
width: 219px;
table-layout: fixed
}
.childTbl th,
.childTbl td {
font-size: 12px;
font-weight:bold;
background: #222937;
color: white;
width: 10px;
border-bottom: 1pt solid red;
cursor: pointer;
}
.scrollData {
width: 236px;
height: 110px;
overflow-x: hidden;
}
td.border{
color: #D3AB04;
font-size: 11px;
width: 10px;
}
tr.row:nth-child(odd) {
background: #222937;
}
tr.row:nth-child(even) {
background: black;
}
</style>";
echo '<div class=parentTbl>';
echo '<table>';
echo '<tr>';
echo '<td>';
echo '<div class=childTbl>';
echo '<table class=childTbl>';
echo '<thead>';
echo '<tr>';
echo '<th onclick="sort_table(people, 0, asc1); asc1 *= -1; asc2 = 1; asc3 = 1; asc4 = 1;">Bank Name</th>';
echo '<th onclick="sort_table(people, 1, asc2); asc2 *= -1; asc3 = 1; asc4 = 1; asc1 = 1;">City</th>';
echo '<th onclick="sort_table(people, 2, asc3); asc3 *= -1; asc4 = 1; asc1 = 1; asc2 = 1;">Acq. Inst.</th>';
echo '<th onclick="sort_table(people, 3, asc4); asc4 *= -1; asc1 = 1; asc2 = 1; asc3 = 1;">Closing Date</th>';
echo '</tr>';
echo '</thead>';
echo '</table>';
echo '</div>';
echo '</td>';
echo '</tr>';
echo '<tr>';
echo '<td>';
echo '<div class=scrollData childTbl>';
echo '<table>';
echo '<tbody id=people>';
if (false !== ($ih = fopen($input, 'r')))
{
fgetcsv($ih);
while (false !== ($data = fgetcsv($ih)))
{
$outputData = array($data[0], $data[1], $data[4], $data[5]);
echo '<tr class=row>';
foreach ($outputData as $row)
{
echo "<td class=border>" . htmlspecialchars($row) . "</td>";
}
echo '</tr>';
}
}
echo '</tbody>';
echo '</table>';
echo '</div>';
fclose($ih);
echo '</td>';
echo '</tr>';
echo '</table>';
echo '</div>';
?>
<script type="text/javascript">
var people, asc1 = 1,
asc2 = 1,
asc3 = 1;
asc4=1;
window.onload = function () {
people = document.getElementById("people");
}
function sort_table(tbody, col, asc){
var rows = tbody.rows, rlen = rows.length, arr = new Array(), i, j, cells, clen;
// fill the array with values from the table
for(i = 0; i < rlen; i++){
cells = rows[i].cells;
clen = cells.length;
arr[i] = new Array();
for(j = 0; j < clen; j++){
arr[i][j] = cells[j].innerHTML;
}
}
// sort the array by the specified column number (col) and order (asc)
arr.sort(function(a, b){
return (a[col] == b[col]) ? 0 : ((a[col] > b[col]) ? asc : -1*asc);
});
for(i = 0; i < rlen; i++){
arr[i] = "<td class=border>"+arr[i].join("</td><td class=border>")+"</td>";
}
tbody.innerHTML = "<tr class=row>"+arr.join("</tr><tr class=row>")+"</tr>";
}
</script>