0

我有一个看起来像这样的项目表

如您所见，表格并没有占据屏幕的整个宽度（该图像的宽度就是屏幕的宽度，这个应用程序是为移动设备设计的）

为显示此内容而生成的 HTML 如下所示：

<table>
    <tbody>
        <tr>
            <td>
                <span style="display: table; min-width: 320px; max-width: 640px; border-top: 1px solid #f6f6f6; width: 100%;">
                    <div style="display: table-row;">
                        <div style="display: table-row; float: left;">
                            <div><b>R8,383.00</b></div>
                            <div>
                                <img style="float: left;" src="../resources/img/icon_circle_footer.png" width="20px" height="20px">
                                Emirates
                            </div>
                        </div>
                        <div style="display: table-row; float: left;">
                            <div>
                                <div>
                                    <span><b>13:30</b></span> - 07:00
                                </div>
                                <div style="display: table-row;">18h 30m, 1-stop</div>
                           </div>
                            <div>
                               <div>
                                   <span><b>14:25</b></span> - 16:25
                                </div>
                                <div style="display: table-row;">25h 0m, 1-stop</div>
                            </div>
                        </div>
                        <div  style="display: table-row; float: right;">
                            <img style="float: right;" src="../resources/img/icon_circle_footer.png" width="20px" height="20px">
                        </div>
                    </div>
                </span>
            </td>
        </tr>
    </tbody>
</table>

我没有费心包括为字体着色的样式。图片甚至那么宽的唯一原因是因为我设置了最小宽度为 320px，然后让最后一张图片向右浮动。

将 min-width 设置为 100%不起作用。我在这里束手无策，如果有人可以借给我，我将非常感谢一些帮助。

4

6 回答 6

3

你想要的是width='100%'内联样式。演示 在此处输入图像描述

100 % 宽度表：

<table bgcolor='red' width='100%'>
    <tr>
        <td>11</td>
        <td>12</td>
        <td>13</td>
        <td>14</td>
    </tr>
    <tr>
        <td>21</td>
        <td>22</td>
        <td>23</td>
        <td>24</td>
    </tr>
    <tr>
        <td>31</td>
        <td>32</td>
        <td>33</td>
        <td>34</td>
    </tr> 
</table>

小提琴演示：http: //jsfiddle.net/xeemez/WJJBX/

Alternatively您可以使用 CSS 而不是这样的内联标签：

table{
    background:red;
    width:100%; }
于 2013-09-04T08:35:47.023 回答
2

如果你没有为你的表格设置一个特定的宽度，它只会占用显示它所包含的内容所需的空间。所以使用width: 100%.

于 2013-09-04T08:21:08.387 回答
2

您应该width="100%"为父表添加。

<table width="100%">
于 2013-09-04T08:21:35.893 回答
2

演示

如果你试一试<table width="100%"></table>

或者 你做class table{width:100%;} both of work

HTML

<table width="100%">
    <tbody>
        <tr>
            <td>
                <span style="display: table; min-width: 320px; max-width: 640px; border-top: 1px solid #f6f6f6; width: 100%;">
                    <div style="display: table-row;">
                        <div style="display: table-row; float: left;">
                            <div><b>R8,383.00</b></div>
                            <div>
                                <img style="float: left;" src="../resources/img/icon_circle_footer.png" width="20px" height="20px">
                                Emirates
                            </div>
                        </div>
                        <div style="display: table-row; float: left;">
                            <div>
                                <div>
                                    <span><b>13:30</b></span> - 07:00
                                </div>
                                <div style="display: table-row;">18h 30m, 1-stop</div>
                           </div>
                            <div>
                               <div>
                                   <span><b>14:25</b></span> - 16:25
                                </div>
                                <div style="display: table-row;">25h 0m, 1-stop</div>
                            </div>
                        </div>
                        <div  style="display: table-row; float: right;">
                            <img style="float: right;" src="../resources/img/icon_circle_footer.png" width="20px" height="20px">
                        </div>
                    </div>
                </span>
            </td>
        </tr>
    </tbody>
</table>

演示2

CSS

table{
    background-color:yellow;
    width:100%;
}
于 2013-09-04T08:25:42.590 回答
1

请使用 div，而不是表格 :)

演示

width:100%;

祝你有美好的一天！:D

更新： 为什么不在 HTML 中使用表格进行布局？

于 2013-09-04T08:57:19.120 回答
0

只有在<table>您可以定义宽度。Td 可能会起作用，但要确保它在您必须做到的任何地方都能正常工作<table width="_of_your_desire">

高度也是如此 - 只有这次高度只能在<td>.

运气

于 2013-09-26T09:54:17.190 回答