CODEWITHSUNDEEP
csstwitter-bootstrapdatatables
bo_knows
bo_knows

Reputation: 866

DataTables bootstrap grid width. Can we style tables inline?

I've been trying to implement DataTables onto my site, using Bootstrap styling, and initializing the tables with javascript. I have several tables next to each other, but the DataTables wrapper that is created seems to put a col-sm-12 row for each one, not allowing the tables to be inline from each other.

I have a basic HTML setup:

<table id='stats1a' class="table table-bordered display"></table>
<table id='stats1b' class="table table-bordered display"></table>

And fairly straightforward javascript calls: 

$('#stats1a").DataTable( {
        data: dataSet1a, //data defined elsewhere
        columns: [
            { title: "" },
            { title: "Ending Portfolio" },
            { title: "Yearly Withdrawals" },
            { title: "Total Withdrawals" },
        ],
        "ordering": false,
        "paging": false,
        "searching": false,
        "info": false
    } );

How can I get these tables to line up inline, rather than on top of eachother, using DataTables options?

Upvotes: 0

Views: 1067

Answers (1)

Kevin
Kevin

Reputation: 160

Why not encompass them within a higher-level row/columns collection:

<div class="row">
    <div class="col-md-6">
        <table id='stats1a' class="table table-bordered display"></table>
    </div>
    <div class="col-md-6">
        <table id='stats1b' class="table table-bordered display"></table>
    </div>
</div>

This way when whatever it is that automatically wraps them in the col-sm-12 does its thing, that "12" ends up being the 12 columns of those available to it within the col-md-6.

Upvotes: 2

Related Questions