Trying to freeze columns on multiple tables on a page

measterbro

I create multiple tables dynamically on a page based on the number of rows in one of our database tables. Freezing columns works fine on the first table but not at all on subsequent ones. The script I am using is:

...

$(document).ready(function () {
var table = $('.table_id').DataTable({
scrollX: true,
paging: false,
info: false,
searching: false
}
});

new $.fn.dataTable.FixedColumns(table, {
    leftColumns: 2,
    rightColumns: 0
});

});
...

The link to the page is:

http://www.citydynasty.com/Standings/Baseball/MLB/2012%20-%20copy.cshtml

The code in the HTML is:

...

foreach (var procRowDiv in procRowConf)
{

        var procRowDivs = db.Query("Exec dbo.BBStandingsSeason @hdiv=@0, @TimePeriod=@1, @Season=@2", @procRowDiv.Division_ID, TimePeriod, Season);
        <table class="table_id display">
            <thead>
                @if (loop == 1)
                {
                    <tr class="loop1">
                        <th class="row-name-standings-overall" style="border-right-width:0">Rank</th>
                        <th class="row-name-standings-overall" title="Division">@procRowDiv.Division_Name</th>
                        <th class="row-Data" title="Total Games">G</th>
                        <th class="row-Data" title="Wins">W</th>
                        <th class="row-Data" title="Losses">L</th>
                        <th class="row-Data" title="Winning Percentage">Pct</th>
                        <th class="row-Data" title="Games Behind">GB</th>
                        <th class="row-Data" title="Runs Scored">RS</th>
                        <th class="row-Data" title="Runs Allowed">RA</th>
                        <th class="row-Data" title="Runs Scored minus Runs Allowed">Diff</th>
                        <th class="row-Data" title="Average Runs Scored">ARS</th>
                        <th class="row-Data" title="Average Runs Allowed">ARA</th>
                        <th class="row-Data" title="Average Runs Scored minus Average Runs Allowed">ADiff</th>
                        <th class="row-Data" title="Shutouts For">SOF</th>
                        <th class="row-Data" title="Shutouts Allowed">SOA</th>
                    </tr>
                }
                else
                {
                    <tr class="loop2">
                        <th class="row-name-standings-overall-a" style="border-right-width:0">Rank</th>
                        <th class="row-name-standings-overall-a" title="Division">@procRowDiv.Division_Name</th>
                        <th class="row-Data2" title="Total Games">G</th>
                        <th class="row-Data2" title="Wins">W</th>
                        <th class="row-Data2" title="Losses">L</th>
                        <th class="row-Data2" title="Winning Percentage">Pct</th>
                        <th class="row-Data2" title="Games Behind">GB</th>
                        <th class="row-Data2" title="Runs Scored">RS</th>
                        <th class="row-Data2" title="Runs Allowed">RA</th>
                        <th class="row-Data2" title="Runs Scored minus Runs Allowed">Diff</th>
                        <th class="row-Data2" title="Average Runs Scored">ARS</th>
                        <th class="row-Data2" title="Average Runs Allowed">ARA</th>
                        <th class="row-Data2" title="Average Runs Scored minus Average Runs Allowed">ADiff</th>
                        <th class="row-Data2" title="Shutouts For">SOF</th>
                        <th class="row-Data2" title="Shutouts Allowed">SOA</th>
                    </tr>
                }
            </thead>

            <tbody>
                @foreach (var procRowStandings in procRowDivs)
                {
                    <tr>
                        <td>@procRowStandings.rank</td>
                        <td class="team">@procRowStandings.Team</td>
                        <td>@procRowStandings.G</td>
                        <td>@procRowStandings.W</td>
                        <td>@procRowStandings.L</td>
                        <td>@procRowStandings.Pct</td>
                        <td>@procRowStandings.GB</td>
                        <td>@procRowStandings.RS</td>
                        <td>@procRowStandings.RA</td>
                        <td>@procRowStandings.Diff</td>
                        <td>@procRowStandings.ARS</td>
                        <td>@procRowStandings.ARA</td>
                        <td>@procRowStandings.ADiff</td>
                        <td>@procRowStandings.SOA</td>
                        <td>@procRowStandings.SOF</td>
                    </tr>
                }
            </tbody>
        </table>

<br />

    }   

...

measterbro

The webpage must be shrunk in a browser or viewed on a phone to see the horizontal scroll and frozen columns.

measterbro

This can be closed.