将表格置于图像之上

本文关键字:图像 表格 于图像 | 更新日期: 2023-09-27 18:01:48

我有一个表,我想放置在图像上,捕获的是表的内容是动态的,所以图像大小需要根据表的大小缩小或增长,什么是实现这一目标的最佳方法。

这是图片:http://postimg.org/image/s2vjf4p3t/

这是我的表格

的html
    <table id="menutable">
        <thead>
            <tr>
                <th style="width:100px;">Day</th>
                <th style="width:150px;">Meal</th>
                <th class="text-center">Normal</th>
                <th style="width:20px;"></th>
                <th class="text-center">No carb</th>
            </tr>
            <tr>
                <th></th>
                <th></th>
                <th style="width:240px;" class="text-center">
                    <div class="row">
                        <div class="col-md-4">
                            Kiddies
                        </div>
                        <div class="col-md-4">
                            Standard
                        </div>
                        <div class="col-md-4">
                            Large
                        </div>
                    </div>
                </th>
                <th></th>
                <th style="width:240px;" class="text-center">
                    <div class="row">
                        <div class="col-md-4">
                            Kiddies
                        </div>
                        <div class="col-md-4">
                            Standard
                        </div>
                        <div class="col-md-4">
                            Large
                        </div>
                    </div>
                </th>
            </tr>
        </thead>
        <tbody>
            @{

    for (int i = 0; i < 5; i++)//foreach day in the week
    {
        string size = "";
        string type = "";
        <tr>
            <td style="vertical-align:top; font-size:20px;">@Model.Menu[i].Day</td>
            <td>
                <b>@Model.Menu[i].NormalMeal</b>
                <br />
                <p>@Model.Menu[i].Description</p>
                <p><b>@Model.Menu[i].LowMeal</b></p>
            </td>
            @for (int p = 0; p < 2; p++) //for normal and nocarb
            {
                if (p == 0)
                {
                    type = "normal";
                }
                else
                {
                    type = "nocarb";
                }
                if (p == 1)
                {
                    <td></td>
                }
                <td class="text-center">
                    <div class="row">
                        @for (int j = 0; j < 3; j++) //the sizes
                        {
                            if (j == 0)
                            {
                                size = "kid";
                            }
                            else if (j == 1)
                            {
                                size = "standard";
                            }
                            else
                            {
                                size = "large";
                            }
                            <div class="col-md-4">
                                <select style="position:relative;top:0px; font-size:12px;" name="@(Model.Menu[i].Day.ToLower().ToString() + "_"+type+"_" + size)" @if (i <= disabledDays) { @disabled  }>
                                    <option> </option>
                                    @for (int k = 1; k <= 10; k++)
                                    {
                                        <option>@k</option>
                                    }
                                </select>
                            </div>
                        }
                    </div>
                </td>
            }

        </tr>
                <tr>
                    <td colspan="6">
                        <hr />
                    </td>
                </tr>
    }
            }
        </tbody>
        <tfoot>
        </tfoot>
    </table>

将表格置于图像之上

这里需要做的是将表格和图像放在同一个容器中。使图像绝对,这样容器的大小是由表格决定的,而图像应该有100%的宽度和高度来填充它。

你的代码应该看起来像这样:

  <div style="position:relative">
    <img src="" style="position: absolute; width: 100%; height: 100%" />
    <table>
    ...
    </table>
</div>

好的,所以我最终把图像分成三部分即顶部中间和底部和人体表的每一行添加css背景的图像和整理桌子的位置让它进入我的形象我添加了一个额外的中间表细胞表的开始和结束,给它一个特定的宽度的边界,使它不再是我的形象