0

我想在 html 表格和中心显示图像。如何做到这一点？该图像只是一个进度条。因此，此图像在加载时将出现在 html 表格上。我在下面尝试过这样的操作，但它没有出现在 html 表格和表格的中心。

<div style="overflow: auto;height: 400px">
    <table id ="tbl"  style="width: 100%;background-image: url(img/busyIndicator.gif);background-repeat: no-repeat;background-position: center" >
        <colgroup>
            <col style="width: 30px"/>
            <col style="width: 10px"/>
            <col style="width: 1px" />
            <col style="width: 80px"/>
            <col/>
        </colgroup>
        <script id="Template" type="text/x-jquery-tmpl">
        <tr >
            <td>${Id}</td>
            <td>${Age}</td>
            <td></td>
            <td>${Name}</td>
        </tr>
        </script>

        <tbody id="List">
        </tbody>
    </table>
</div>

希望它能澄清我的问题。如果您需要更多信息，请告诉我。

更新1

我现在在桌子上添加了图像而不是 td 但仍然没有出现

Update2 我正在通过 ajax 调用将数据加载到我的 jquery 模板中。不确定是否需要显示我的 ajax 调用代码。所以图像应该在数据加载时出现，并且在完成加载后应该消失

4

2 回答 2

2

我想你只需要添加：

  • position: relative到桌子上
  • background-position: center center; position: absolute; left: 0; right: 0; left: 0; bottom: 0;给你的 td

所以你的代码将是：

<div style="overflow: auto;height: 400px">
    <table id ="tbl" style="position: relative; width: 100%;" >
        <colgroup>
            <col style="width: 30px"/>
            <col style="width: 10px"/>
            <col style="width: 1px" />
            <col style="width: 80px"/>
            <col/>
        </colgroup>
        <script id="Template" type="text/x-jquery-tmpl">
        <tr >
            <td>${Id}</td>
            <td>${Age}</td>
            <td style="background-image: url(img/img1.gif); background-position: center center; position: absolute; left: 0; right: 0; left: 0; bottom: 0;"></td>
            <td>${Name}</td>
        </tr>
        </script>

        <tbody id="List">
        </tbody>
    </table>
</div>
于 2013-07-18T07:33:18.663 回答
2

在样式属性中，只需添加：

background-position: center center;

于是变成了：

<td style="background-image: url(img/img1.gif); background-position: center center" ></td>

在这里阅读更多-> http://www.w3schools.com/cssref/pr_background-position.asp

ps：in style 属性如果是合成的更好，所以可以全部这样写

background: url(img/img1.gif) center center;

看这里了解“背景”属性是如何工作的-> http://www.w3schools.com/css/css_background.asp

编辑：

如果要将加载的 img 放在标签中并将其放置在 td 的中心，则必须将这种样式分配给图像：

style="display:table-cell;vertical-align:middle; margin:auto"

但是，请在该图像上给出一个类并将样式写入 css 文件。

于 2013-07-18T07:27:55.623 回答