为什么我的 css 显示不规则

...
    <button class="save bookbtn mt1">More</button>
...
    <div class="cruisedropd">
        <div id="loading" class="loading"></div>
    </div>
...

...
$('.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>')
        ...
    }
    ...
}
...

简短的回答是你不能以这种方式构建表。

您的第一个代码段将追加表标题。 然后 DOM 会自动添加结束表标记。

下一个代码片段运行一个循环来追加行。但是，该表已在上一步中创建。

所以你最终会在 DOM 中得到 2 个不对齐的表。

建议将表构建为字符串，然后将该字符串附加到div，以便 DOM 构建单个表。

更新：

作为对 OP 注释的响应，此代码演示了如何使原始代码仅通过 3 个非常小的更改即可工作。该表首先构建为字符串。然后将该字符串追加到容器的内部 HTML 中。这样做可以防止 DOM 过早地向表元素添加结束标记，就像原始代码中的情况一样。

现在表头和行对齐，这是所述的问题。

单击"运行代码片段"按钮以查看其工作情况。

function success() {
		
                    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>');
				
				$('#container').html( html );
}
		
// 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>

您的意思是表格内容未正确对齐吗？验证您的 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;
}

小提琴：https://jsfiddle.net/vup7vz1k/1/