Tables search field and other text not aligning with table

deville

Hi. I've managed to style the tables width with what I saw here > https://datatables.net/examples/basic_init/flexible_width.html
(style="width:70%" inside the table tag)

However. the search field and page count among other text wont align with the rest of it.
Here's the website I am working on for a clear example of what's going on. Thanks in advance.

https://globalstrafe.com/gotv/hns-eu/

colin

Hi @deville ,

You've got a very odd structure to your HTML.

<div id="wrapper">
<table id="gotvTable" class="pure-table pure-table-horizontal stripe" style="width:70%">
    <thead>
        <tr>
            <th>#</th>
            <th>Timestamp</th>
            <th>Map</th>
            <th>Size</th>
            <th>Download</th>
        </tr>
    </thead>
</div>
</body>
</html>
</head>

<tbody>
<tr class='pure-table-odd display'>
                <td>1</td>
                <td>2018-04-29 20:45</td>
                <td>hns_zen_v1</td>
                <td>32.61MB</td>
                <td>
<...snip...>
                </tr></tbody>

<script>
$(document).ready( function () {
    $('#gotvTable').DataTable();
} );
</script>
</table>

The body and head and all sorts are jiggled around. I'm pretty certain that's non-standard, and therefore unsupported. Is there a reason for that?

Cheers,

Colin

deville

I looked over it and made some edits. Please have another look now. The issue didn't get fixed though. If you need a better view of the code I could provide that in pm.

colin

Hi @deville ,

That's fine, I stripped it down and put it into this example here, and am seeing the same thing. I'll have a play and get back to you.

Cheers,

Colin

allan

This is actually working as expected . DataTables will place a div container around the table into which it places all of its controls (page length, search, etc). div elements are 100% width by default in CSS (block element) so if you apply a width to the table that is not 100%, then yes, the table will be smaller.

Two options:

1) (This is the "normal" way) Have a div or section which you set to be something like:

div.container {
  width: 70%;
  margin: 0 auto;
}

Then all of your page's content goes into there.

2) Apply width: 70% to the div.dataTable_wrapper selector.

Allan

deville

I mean I don't have an issue changing the tables width and it's content. It's specifically the search bar, pagination and the "Show -- Entries" text. I'd love to be able to move it freely. What in the css file do I have to edit to achieve that? > https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css

allan

I would put it in your own CSS file rather than in the DataTables one. That way when you upgrade DataTables you won't need to modify the file again.

Here is an example with my CSS from above: http://live.datatables.net/xepikaci/1/edit .

Allan

deville

I've managed to align it after many different types of attempts. I've also done as you mentioned, extracting the css code.

.. Although now there's a new issue in play: I can't align the tbody. As you can see on my website it doesn't look too right: https://globalstrafe.com/gotv/hns-eu/

I've only managed to align the Download button on the right, which was easily done by editing the img class. But the rest of it just wont work, doesn't matter if i make div containers or whatever. Nothing seem to be happening when changing in the current datatables css either..

EDIT: I simply just want the <td> content to be centered and aligned with the header text, "Timestamp, Size etc..". Just like the download image is

Excuse my poor english..

deville

Okay I was a little too naive there. I took a proper look at your code allan and realized that I've made a few tagging mistakes that I wasn't aware of. Adjusted a few things and it looks better for sure now. Thank you all for the help!