Datatables fixedcolumn not lining up correctly.
Datatables fixedcolumn not lining up correctly.
jeffreyyourman
Posts: 1Questions: 1Answers: 0
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.2.2/css/fixedColumns.dataTables.min.css">
<link rel="stylesheet" href="/assets/css/style.css">
<style media="screen">
/*Change the size here*/
/*th, td { white-space: nowrap; }
div.dataTables_wrapper {
width: 800px;
margin: 0 auto;
}*/
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
div.tooltip-inner {
max-width: 350px;
}
.nbaposition {
background-color:#021A3A;
color:white;
}
.highlight {
background-color:#edb82a;
color:black;
}
</style>
</head>
<body>
<div class="container-fluid NFLTeamTable">
<div class="row">
<div style='font-size:24px;' class="col-md-7">
<h2>What will go here is:</h2>
<!-- <button class='fadeORdelete' type="button" data-fadeORkeep='All' name="button">All</button>
<button class='fadeORdelete' type="button" data-fadeORkeep='KEEP' name="button">KEEP</button>
<button class='fadeORdelete' type="button" data-fadeORkeep='DELETE' name="button">DELETE</button> -->
<button class='nbaposition' type="button" data-position='All' name="button">All</button>
<button class='nbaposition' type="button" data-position='PG' name="button">PG</button>
<button class='nbaposition' type="button" data-position='SG' name="button">SG</button>
<button class='nbaposition' type="button" data-position='SF' name="button">SF</button>
<button class='nbaposition' type="button" data-position='PF' name="button">PF</button>
<button class='nbaposition' type="button" data-position='C' name="button">C</button>
</div>
<div style='font-size:24px;' class="col-md-5">
<h2>My Suggested Fanduel NBA Players</h2>
<ul class='suggestedPlayersNBA'>
</ul>
</div>
</div>
</div>
<div id='playerlist' class="container-fluid NFLtables">
<div class="row nbafantasy">
<div class="col-md-12">
<div class="panel-body beforeResponsive">
<div class="table-responsive">
<!-- put images here -->
<table class="table table-hover tableNbaFantasy secondtablenbafantasy">
<thead>
<tr style='font-size: 16px;'>
<th>Player<a href="#" data-toggle="tooltip" data-placement="top" title="Player names"><span class="infoicon glyphicon glyphicon-info-sign"></span></a></th>
<th>H/A<a href="#" data-toggle="tooltip" data-placement="top" title="Home or away game"><span class="infoicon glyphicon glyphicon-info-sign"></span></a></th>
<th>Position<a href="#" data-toggle="tooltip" data-placement="top" title="Position of a player"><span class="infoicon glyphicon glyphicon-info-sign"></span></a></th>
<th>Team<a href="#" data-toggle="tooltip" data-placement="top" title="Players current team"><span class="infoicon glyphicon glyphicon-info-sign"></span></a></th>
<th>Opp<a href="#" data-toggle="tooltip" data-placement="top" title="What team they're up against"><span class="infoicon glyphicon glyphicon-info-sign"></span></a></th>
<th>Condition<a href="#" data-toggle="tooltip" data-placement="top" title="Injury status"><span class="infoicon glyphicon glyphicon-info-sign"></span></a></th>
<th>Details<a href="#" data-toggle="tooltip" data-placement="top" title="Details of injury"><span class="infoicon glyphicon glyphicon-info-sign"></span></a></th>
<th>ProjMins<a href="#" data-toggle="tooltip" data-placement="top" title="How many minutes a player is projected to play"><span class="infoicon glyphicon glyphicon-info-sign"></span></a></th>
<th>Salary<a href="#" data-toggle="tooltip" data-placement="top" title="Cost of player on Fanduel"><span class="infoicon glyphicon glyphicon-info-sign"></span></a></th>
<th>Useage%<a href="#" data-toggle="tooltip" data-placement="top" title="How long a player has control of the ball per possession"><span class="infoicon glyphicon glyphicon-info-sign"></span></a></th>
<th>PPG/L10<a href="#" data-toggle="tooltip" data-placement="top" title="Average fantasy points per game for the last 10 games"><span class="infoicon glyphicon glyphicon-info-sign"></span></a></th>
<th>PPM<a href="#" data-toggle="tooltip" data-placement="top" title="How many fantasy points a player gets per minute"><span class="infoicon glyphicon glyphicon-info-sign"></span></a></th>
<th>OVP<a href="#" data-toggle="tooltip" data-placement="top" title="How well the opponent defends that specific position"><span class="infoicon glyphicon glyphicon-info-sign"></span></a></th>
<th>ProjTeamScore<a href="#" data-toggle="tooltip" data-placement="top" title="Teams projected score"><span class="infoicon glyphicon glyphicon-info-sign"></span></a></th>
<th>GameLine<a href="#" data-toggle="tooltip" data-placement="top" title="Total team points"><span class="infoicon glyphicon glyphicon-info-sign"></span></a></th>
<th>ProjectedPts<a href="#" data-toggle="tooltip" data-placement="top" title="Projected points of a specific player"><span class="infoicon glyphicon glyphicon-info-sign"></span></a></th>
<th>Value<a href="#" data-toggle="tooltip" data-placement="top" title="Projected value of a specific player based on projections"><span class="infoicon glyphicon glyphicon-info-sign"></span></a></th>
<th>ExpectedValue<a href="#" data-toggle="tooltip" data-placement="top" title="Projected value of a specific player based on previous games"><span class="infoicon glyphicon glyphicon-info-sign"></span></a></th>
<th>GamesPlayed<a href="#" data-toggle="tooltip" data-placement="top" title="How many games a player has played"><span class="infoicon glyphicon glyphicon-info-sign"></span></a></th>
<th>SalaryAdjust<a href="#" data-toggle="tooltip" data-placement="top" title="How much their salary has either increased or decreased from previous game"><span class="infoicon glyphicon glyphicon-info-sign"></span></a></th>
<th>RecentPerformance<a href="#" data-toggle="tooltip" data-placement="top" title="Their last game compared to their average"><span class="infoicon glyphicon glyphicon-info-sign"></span></a></th>
<th>PTsVPos<a href="#" data-toggle="tooltip" data-placement="top" title="How many points the opponent gives up against a specific position"><span class="infoicon glyphicon glyphicon-info-sign"></span></a></th>
<th>CriteriaRanking<a href="#" data-toggle="tooltip" data-placement="top" title="My rankings for players. 6 is the best. 5 is ok. Everybody below be catious"><span class="infoicon glyphicon glyphicon-info-sign"></span></a></th>
<th>Keep/Fade<a href="#" data-toggle="tooltip" data-placement="top" title="Our preference of who you should play or fade"><span class="infoicon glyphicon glyphicon-info-sign"></span></a></th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
<script src='https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js'></script>
<script src='https://cdn.datatables.net/fixedcolumns/3.2.2/js/dataTables.fixedColumns.min.js'></script>
here is the code to my javascript file
var table = $('.tableNbaFantasy').DataTable({
data: data.feed.entry,
"dom": '<"NBAimages">frtip',
"scrollY": "600px",
"scrollX": true,
"scrollCollapse": true,
"pageLength": 50,
"order": [[ 9, "desc" ]],
"fixedHeader": true,
the issue is that the table ends up looking like (image attached)
and I am unsure how to fix it. I thought at first that it was a order issue with my links and scripts. But i rearranged them multiple times and nothing fixed the issue.
Anything you can do to help I would greatly appreciate it!
This discussion has been closed.