增加了网站上项目之间的空间

Increased space between items on the website

本文关键字：之间 空间 项目 网站 增加      更新时间：2023-09-26

您好！我正在做一个布局网站，我有以下问题：

有一个页面上动态加载了一些数据。加载初始页面时，项目无法准确显示。ajax更新之前

更新后，数据项将按原样显示。ajax更新后

需要对原始页面进行的修改看起来很整洁。

谢谢

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>

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

执行此

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

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

您不应该使用内联样式，但我正在适应您的编码样式。

将您的表格更改为以下内容：

我给你的桌子增加了宽度

<table id="loco-summary" class="small" style="width: 400px;">
    <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>
相关文章：