Question

我有一个看起来像this

的项目表

如您所见，该表不占用屏幕的整个宽度（该图像的宽度是屏幕的宽度，此应用程序是专为移动设备设计的）

为显示此内容而生成的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％不起作用。我的智慧在这里结束了，如果有人可以借给我，我真的很感激一些帮助。

Answer 1

您想要的是width='100%'内联样式。 DEMO enter image description here

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%; }

Answer 2

如果没有为表格设置特定宽度，则只需占用显示其所持内容所需的空间。因此，请使用width: 100%。

Answer 3

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

<table width="100%">

Answer 4

<强> DEMO

如果您尝试提供<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>

<强> DEMO2

<强> CSS

table{ background-color:yellow; width:100%; }

Answer 5

请使用div，而不是表格。）

DEMO

width:100%;

祝你有个美好的一天！：d

<强>更新： Why not use tables for layout in HTML?

Answer 6

只有<table>才能定义宽度。 Td可能会起作用，但为了确保它在任何地方都能正常工作，你必须将它变为<table width="_of_your_desire">

高度也是如此 - 只有这个时间高度才能在<td>中定义。

福

表不占屏幕宽度的100％

6 个答案: