Почему мой css отображается нерегулярно?

Question

Мой HTML код выглядит так:

... 
    <button class="save bookbtn mt1">More</button> 
... 

    <div class="cruisedropd"> 
     <div id="loading" class="loading"></div> 
    </div> 
... 

Мой Javascript код подобен этому

... 
$('.save').click(function() { 
    ... 
    success: function (response) { 
     ... 
     var elem = $parent.find('.loading').empty(); 
        elem.append('<table class="table">\ 
        <tbody>\ 
         <tr>\ 
          <th>Status</th>\ 
          <th>Room Grade</th>\ 
          <th>Meal</th>\ 
          <th>Per Room.Night</th>\ 
          <th>Cancel Policy</th>\ 
          <th>Book It</th>\ 
         </tr>') 
        for(var i=0; i<response.SearchAvailResponse.Hotel.length; i++){ //make sure to use var 

         elem.append('<tr>\ 
          <td>' + Status + '</td>\ 
          <td>' + RmGrade + '</td>\ 
          <td>' + Meal + '</td>\ 
          <td>' + Currency + ' ' + TotalRate + '</td>\ 
          <td><a href="#">Cancel Policy</a></td>\ 
          <td>\ 
           <form action="details.html">\ 
            <button class="bookbtn mt1" type="submit">Book</button>\ 
           </form>\ 
          </td>\ 
         </tr>'); //add the new content 
        } 
        elem.append('</tbody>\ 
       </table>') 
     ... 
    } 
    ... 
} 
... 

The View, как это: http://imgur.com/1OIVGGU

Почему мой CSS дисплей скачками?

Любое решение для решения моей проблемы?

Большое спасибо

Answer 1

Короткий ответ в том, что вы не можете построить таблицу таким образом.

Ваш первый фрагмент кода добавляет заголовки таблиц. Затем DOM автоматически добавляет закрывающий тег таблицы.

Ваш следующий фрагмент кода запускает цикл для добавления строк. Однако таблица уже была создана на предыдущем шаге.

Итак, вы получите 2 таблицы в DOM, которые не выровнены.

Предложите создать таблицу в виде строки, а затем добавить эту строку в div, чтобы DOM построил одну таблицу.

UPDATE:

Этот код, в ответ на OP комментарий, показывает, как сделать оригинальный код работать с только 3 очень незначительными изменениями. Таблица сначала построена как строка. Затем строка добавляется к innerHTML контейнера. Выполнение этого способа не позволяет DOM преждевременно добавлять закрывающий тег в элемент таблицы, как это было в исходном коде.

И теперь заголовок таблицы и строки выравниваются, что было заявленной проблемой.

Нажмите кнопку «Выполнить фрагмент кода», чтобы увидеть, как она работает.

function success() { 
 

 
\t \t 
 
        var html =('<table class="table">\ 
 
        <tbody>\ 
 
         <tr>\ 
 
          <th>Status</th>\ 
 
          <th>Room Grade</th>\ 
 
          <th>Meal</th>\ 
 
          <th>Per Room.Night</th>\ 
 
          <th>Cancel Policy</th>\ 
 
          <th>Book It</th>\ 
 
         </tr>') 
 
        for(var i=0; i<10; i++){ 
 

 
         html += ('<tr>\ 
 
          <td>' + Status + '</td>\ 
 
          <td>' + RmGrade + '</td>\ 
 
          <td>' + Meal + '</td>\ 
 
          <td>' + Currency + ' ' + TotalRate + '</td>\ 
 
          <td><a href="#">Cancel Policy</a></td>\ 
 
          <td>\ 
 
           <form action="details.html">\ 
 
            <button class="bookbtn mt1" type="submit">Book</button>\ 
 
           </form>\ 
 
          </td>\ 
 
         </tr>'); 
 
        } 
 
        
 
        html += ('</tbody>\ 
 
       </table>'); 
 
\t \t \t \t 
 
\t \t \t \t $('#container').html(html); 
 
} 
 
\t \t 
 

 
// test data 
 
var Status="OK", RmGrade=5, Meal="Yes", Currency="Euro", TotalRate="100"; 
 

 
success();

td,th {padding:2px; border:1px gray solid;} 
 
th {background-color: peru; } 
 
table {border-collapse: collapse;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 
<div id="container"></div>

Answer 2

ли вы имеете в виду, что содержание таблицы не выровнены должным образом? Убедитесь, что ваш CSS не имеет свойства ширины в вашем элементе TD.

HTML:

<table> 
    <tr> 
    <th>Test1</th> 
    <th>Test2</th> 
    <th>Test3</th> 
    </tr> 
    <tr> 
     <td>Wat</td> 
     <td>Wat2</td> 
     <td>Wat3</td> 
    </tr> 
    <tr> 
     <td>Foo</td> 
     <td>Foo2</td> 
     <td>Foo3</td> 
    </tr> 
</table> 

CSS:

table { 
    width: 100%; 
} 
th, td { 
    text-align: left; 
} 

Fiddle: https://jsfiddle.net/vup7vz1k/1/