javascript - 增加网站上元素之间的空间

Question

美好的一天!我正在制作布局网站，但遇到以下问题:

有一个页面动态加载了一些数据。加载初始页面时，元素无法准确显示。 before ajax update

更新后，数据项将按应有的方式显示。 after ajax update

原始页面需要做的事情看起来很整洁。

谢谢。

HTML:

<table id="loco-summary" class="no-loco">
    <tbody>
        <tr>
            <td>
                <span class="selection" style="background-color: rgba(0, 128, 0, 0.35)">Подключено: 26</span>
                <span class="selection" style="background-color: rgba(255, 0, 0, 0.35)">Отключено на станции: 10</span>
                <span class="selection" style="background-color: rgba(0, 0, 0, 0.35)">Отключено: 20</span>
            </td>
            <td rowspan="2" class="border-left" style="white-space: nowrap;">
                <span class="selection">Всего: 67</span>
                <span class="error-selection" style="background-color: white; color: red;">Ошибки: 15</span>
            </td>
        </tr>
        <tr>
            <td>
                <span class="selection">На станции: 32</span>
                <span class="selection">В депо: 7</span>
                <span class="selection">Вне станции: 28</span>
            </td>
        </tr>
    </tbody>
</table>

Answer 1

似乎是初始标记中的空白问题。您的 ajax 调用返回的标记中没有空格。

执行这个

$("#loco-summary tbody").css("white-space", "nowrap");

在控制台中似乎解决了这个问题，所以 id 建议要么删除 loco-summary 表中的所有空白，要么使用 css 设置空白。