html - テーブルが画面幅の 100% を占めていない

Question

このようなアイテムのテーブルがあります

ご覧のとおり、テーブルは画面の幅全体を占めていません (その画像の幅は画面の幅です。このアプリはモバイル デバイス用に設計されています)。

これを表示するために生成される 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%'インラインスタイルです。デモ

幅 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

デモ

あなたが試してみるなら<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%;
}

Answer 3

テーブルに特定の幅を設定しない場合、保持するコンテンツを表示するために必要なスペースのみが使用されます。を使用しますwidth: 100%。

Answer 4

width="100%"親テーブルに追加する必要があります。

<table width="100%">