Amegabosco’s Weblog

Believe it, it has already happened !!:

empecher les colonnes d’un tableau de déborder

août 12, 2013 à 5:02 · Filed under Non classé

http://stackoverflow.com/questions/5590778/how-to-set-column-widths-to-a-jquery-datatable

I have a jQuery datatable(outlined in red), but what happens is that the table jumps out of the width I have set for the div(which is 650 px).

Here is the screen shot: enter image description here

Here is my code:

<script type="text/javascript">

    var ratesandcharges1;

    $(document).ready(function() {

        /* Init the table*/
        $("#ratesandcharges1").dataTable({
            "bRetrieve": false,
            "bFilter": false,
            "bSortClasses": false,
            "bLengthChange": false,
            "bPaginate": false,
            "bInfo": false,
            "bJQueryUI": true,
            "bAutoWidth": false,
            "aaSorting": [[2, "desc"]],
            "aoColumns": [
            { sWidth: '9%' },
            { sWidth: '9%' },
            { sWidth: '9%' },
            { sWidth: '9%' },
            { sWidth: '9%' },
            { sWidth: '9%' },
            { sWidth: '9%' },
            { sWidth: '9%' },
            { sWidth: '9%' },
            { sWidth: '9%' },
            { sWidth: '10%' } ]
        });

        ratesandcharges1.fnDraw();

    });
</script>
<div id="ratesandcharges1Div" style="width: 650px;"> 

<table id="ratesandcharges1" class="grid" >
    <thead>
        <!--Header row-->
        <tr>
            <th>Charge Code</th>
            <th>Rates</th>
            <th>Quantity</th>
            <th>Total Charge</th>
            <th>VAT %</th>
            <th>Calc. Type</th>
            <th>Paid By</th>
            <th>From</th>
            <th>To</th>
            <th>VAT</th>
            <th>MVGB</th>
         </tr>
    </thead>
    <!--Data row-->
    <tbody>
        <tr>
            <td>Day/Tag</td>
            <td>55.00</td>
            <td>3.00</td>
            <td>165.00</td>
            <td>20.00</td>
            <td>Rental Time</td>
            <td>Bill-to/Agent</td>
            <td>5/11/2010</td>
            <td>08/11/2010</td>
            <td>33.00</td>
            <td>1.98</td>
        </tr>
        <tr>
            <td>PAI</td>
            <td>7.50</td>
            <td>3.00</td>
            <td>22.50</td>
            <td>20.00</td>
            <td>Rental Time</td>
            <td>Driver/Cust.</td>
            <td>5/11/2010</td>
            <td>08/11/2010</td>
            <td>4.50</td>
            <td>0.00</td>
        </tr>
        <tr>
            <td>BCDW</td>
            <td>15.00</td>
            <td>3.00</td>
            <td>45.00</td>
            <td>20.00</td>
            <td>Rental Time</td>
            <td>Driver/Cust.</td>
            <td>5/11/2010</td>
            <td>08/11/2010</td>
            <td>9.00</td>
            <td>0.54</td>
        </tr>
        <tr>
            <td>BTP</td>
            <td>7.15</td>
            <td>3.00</td>
            <td>21.45</td>
            <td>20.00</td>
            <td>Rental Time</td>
            <td>Driver/Cust.</td>
            <td>5/11/2010</td>
            <td>08/11/2010</td>
            <td>4.29</td>
            <td>0.26</td>
        </tr>
    </tbody>
</table>
</div>

Any ideas ?

Thanks

asked Apr 8 ’11 at 5:21
Haxed
84861736
did u try with width="650px" instead of style="width: 650px;" – diEcho Apr 8 ’11 at 5:30

add comment (requires 50 reputation)

4 Answers

Try setting the width on the table itself:

<table id="ratesandcharges1" class="grid" style="width: 650px;">

You’ll have to adjust the 650 by a couple pixels to account for whatever padding, margins, and borders you have.

You’ll probably still have some issues though. I don’t see enough horizontal space for all those columns without mangling the headers, reducing the font sizes, or some other bit of ugliness.

answered Apr 8 ’11 at 5:33
mu is too short
152k15175235
yeah I tried that. Still the same result in the browser. Is it possible to set the width to 650px and make the datatable scrollable from left to right to see the content on the far right. Thks for the reply. – Haxed Apr 8 ’11 at 5:37
You could put overflow-x: auto on #ratesandcharges1Div, that would put a horizontal scrollbar on the surrounding <div>. – mu is too short Apr 8 ’11 at 5:46
Was helpful. Thanks. – Haxed Apr 8 ’11 at 6:58
This fixed my problem. – Kenny Meyer Jul 17 ’11 at 22:42
this was long time ago, but it worked for me 😀 – Misters Jul 1 at 12:44

add comment (requires 50 reputation)

I found this on 456 Bera St. Man is it a lifesaver!!!

http://www.456bereastreet.com/archive/200704/how_to_prevent_html_tables_from_becoming_too_wide/

But – you don’t have a lot of room to spare with your data.

CSS FTW:

<style>
table {
    table-layout:fixed;
}
td{
    overflow:hidden;
    text-overflow: elipsis;
}
</style>
answered Jun 28 ’12 at 12:51
John K
6112
thanks man, this was exactly what I needed. MUCH appreciated. – Code Sherpa Dec 27 ’12 at 22:31
1
ellipsis with two L-s. Minor point. – cartbeforehorse May 2 at 12:08

add comment (requires 50 reputation)

 

$(document).ready(function () {
     $("#companiesTable").dataTable({
              "sPaginationType": "full_numbers",
              "bJQueryUI": true,
              "bAutoWidth": false, // Disable the auto width calculation 
              "aoColumns": [
                               { "sWidth": "30%" }, // 1st column width 
                               { "sWidth": "30%" }, // 2nd column width 
                               { "sWidth": "40%" } // 3rd column width and so on 
                           ]
     });
});

specify the css for table 

table.display {
      margin: 0 auto;
      width: 100%;
      clear: both;
      border-collapse: collapse;
      table-layout: fixed; // ***********add this 
      word-wrap:break-word; // ***********and this 
}

<table id="companiesTable" class="display"> 
<thead>
<tr>
   <th>Company name</th>
   <th>Address</th>
   <th>Town</th>
</tr>
</thead>
<tbody>
   <% for(Company c: DataRepository.GetCompanies()){ %>
<tr>    
   <td><%=c.getName()%></td>
   <td><%=c.getAddress()%></td>
   <td><%=c.getTown()%></td>
</tr>
   <% } %>
</tbody>
</table>

It works for me.......
answered Dec 15 ’12 at 15:42
Exactly what I needed: the config options. – ChrisCantrell May 28 at 18:26

add comment (requires 50 reputation)

In java script calculate width using following code

var scrollX = $(window).width()*58/100; var oTable = $('#reqAllRequestsTable').dataTable({ "sScrollX": scrollX } );

answered Oct 3 ’11 at 10:15
Raje
68911738
add comment (requires 50 reputation)

Your Answer

Not the answer you’re looking for? Browse other questions tagged   or ask your own question.

No comments yet»

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Gravatar
Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. ( Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. ( Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. ( Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. ( Déconnexion / Changer )

Annuler

Connexion à %s

%d blogueurs aiment cette page :