how to place table on page?

louking

I am overlaying a chart with the table, and plan to have a button to switch display between the chart and the table. I am having trouble controlling the location of the table to overlap the chart. I am not sure if this is a basic css question or if it has to do with datatables itself.

See http://codepen.io/louking/pen/KrJPaR

When I inspect the <div> with class dt-chart-table, I see

.dt-chart-table {
    position: absolute;
}

.dataTables_wrapper {
    position: relative;
    clear: both;
    zoom: 1;
}

It seems like the .dataTables_wrapper position is taking precedence, which is what is causing the problem.

Any suggestions?

deesen

Could this help?

.dataTables_wrapper {
  position:absolute !important;
  top:0;
}

louking

This works. Also I can put the position and top styles in .css() calls as

        $(".dataTables_wrapper")
            .css("position", "absolute")
            .css("top", 0);

See http://codepen.io/louking/pen/qNgBXj

Thanks!