Search code examples
javascriptjqueryhtmltwitter-bootstrapbootstrap-table

Bootstrap Table Column Issue


I need help for bootstrap table css so When I make column from Jquery In Bootstrap table i get some issue .This Picture

My Columns slip down. I dont want to this. I give css In my Column so column seem like this. This Picture Can Anyone Help me ?

JQuery Code

var Tablo=document.getElementById("tablo_icin2");
        var tbody=document.getElementById("MyTBody");
        json_obj= $.parseJSON(veri);
        for(var i in json_obj)
        {

            var Satir=document.createElement("tr");
            var Stun=document.createElement("td");
            Stun.appendChild(document.createTextNode(" "));
            Satir.appendChild(Stun);

            //Yeni Stun Ekliyoruzz

            Stun=document.createElement("td");
            Stun.classList.add("sorting_1");
            Stun.appendChild(document.createTextNode(json_obj[i].KuryeNumarasi  ));
            Satir.appendChild(Stun);
            //Yeni Stun Ekliyoruzz

            Stun=document.createElement("td");
            Stun.appendChild(document.createTextNode(json_obj[i].TipId  ));
            Satir.appendChild(Stun);
            //Yeni Stun Ekliyoruzz

            Stun=document.createElement("td");
            Stun.appendChild(document.createTextNode(" "  ));
            Satir.appendChild(Stun);

            //Yeni Stun Ekliyoruzz
            //And More Table Rows in down.

Html Code ;

<table id="tablo_icin2" class="table table-bordered  table-hover table-striped">

                <thead>
                <tr>
                  <th>
                    <span class="btn btn-default btn-sm checkbox-toggle"><i class="fa fa-square-o"></i></span>
                  </th>
                  <th>Kurye&nbsp;Numara</th>
                  <th>Kurye&nbsp;Tipi</th>
                  <th>Kurye&nbsp;Resmi</th>
                  <th>Adı&nbsp;Soyadı</th>
                  <th>TC&nbsp;Numarası</th>
                  <th>Cinsiyeti</th>
                  <th>Doğum&nbsp;Tarihi</th>

                  <th>Açıklama</th>
                  <th>İşe&nbsp;Başlama&nbsp;Tarihi</th>
                  <th>İşten&nbsp;Ayrılma&nbsp;Tarihi</th>
                  <th>Kan&nbsp;grubu</th>
                  <th>Boyu</th>
                  <th>Kilo</th>
                  <th>Ayakkabı&nbsp;Numara</th>
                  <th>Prim&nbsp;Grubu</th>

                  <th>Durumu</th>
                  <th>Sabit&nbsp;Telefonu</th>
                  <th>GSM&nbsp;Telefonu</th>
                  <th>E-&nbsp;mail&nbsp;Adresi</th>
                  <th>Ev&nbsp;Adresi</th>
                  <th>Android&nbsp;Kullanıcı&nbsp;Adı</th>
                  <th>Android&nbsp;Kullanıcı&nbsp;Şifresi</th>
                  <th>Yakının&nbsp;Adı&nbsp;Soyadı</th>
                  <th>Tanıdık&nbsp;Telefon&nbsp;1</th>
                  <th>Tanıdık&nbsp;Telefon&nbsp;2</th>
                  <th>Tanıdık&nbsp;Adres</th> 
                </tr>
                </thead>
                <tbody id="MyTBody">

                </tbody></table>

Solution

  • You could add a class with whitespace nowrap in these particular cells

    .text-nowrap {
        white-space: nowrap;
    }