Table not taking up 100% of the screen width

Question

I have a table of items that look like this

As you can see, the table does not take up the entire width of the screen(the width of that image is the width of the screen, this app is being designed for mobile devices)

The HTML that is generated to display this looks like this:

<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>

I didn't bother including the styles that colors the fonts. The only reason that the image is even that wide, is because I set a minimum width of 320px, and then made the last image float right.

Setting min-width to 100% does not work. I'm at my wits end here, and I would really appreciate some help if anyone can lend it.

1

did you try width:100%; – avrahamcool Sep 04 '13 at 08:20

Ashish Sharma · Answer 1 · 2013-09-06T06:33:34.660

What you want is width='100%' inline style. DEMO enter image description here

100 % width table:

<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>

Fiddle DEMO: http://jsfiddle.net/xeemez/WJJBX/

Alternatively you can use CSS instead of inline tags like this:

table{
    background:red;
    width:100%; }

score 2 · Answer 2 · answered Sep 04 '13 at 08:21

2

If you don't set a specific width for your table it will only take the space necessary to show the content it holds. So use width: 100%.

answered Sep 04 '13 at 08:21

slash197

9,028
6
41
70

score 2 · Answer 3 · answered Sep 04 '13 at 08:21

2

You should add width="100%" for parent table.

<table width="100%">

answered Sep 04 '13 at 08:21

Dipesh Parmar

27,090
8
61
90

Falguni Panchal · Accepted Answer · 2013-09-04T08:31:53.757

DEMO

if you have a try give <table width="100%"></table>

OR you make 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%;
}

score 1 · Answer 5 · edited May 23 '17 at 12:14

1

Please use div's, not tables :)

DEMO

width:100%;

Have a good day! :D

UPDATE: Why not use tables for layout in HTML?

edited May 23 '17 at 12:14

Community

1
1

answered Sep 04 '13 at 08:57

eriksv88

3,482
3
31
50

I actually joined the project after they had already set something out - I'm just trying to get it ready for our demo in a couple of days, after which we're planning on getting rid of most of the tables, since they slow everything down :) – Skytiger Sep 04 '13 at 09:19
Then I would recommend to start by changing from tables to div's here and every other place you change anything .. There is a start! :) – eriksv88 Sep 04 '13 at 09:28
Yea I've started elsewhere already, but the problem is that everyone here wants to use JSF tags like panelGrid and panelGroup, which renders an HTML table. Getting them to stop doing that is a bit of a challenge. – Skytiger Sep 04 '13 at 09:55

score 0 · Answer 6 · edited Sep 26 '13 at 10:19

0

Only in <table> you can define width. Td might work, but to make sure it works the same everywhere you have to make it to <table width="_of_your_desire">

the same goes with the height - only this time height can be defined only in <td>.

Luck

edited Sep 26 '13 at 10:19

Andrew Aylett

39,182
5
68
95

answered Sep 26 '13 at 09:54

Rudolfs

7
1

I'm going to upvote you, though I don't understand what it is that you said. It's strangely beautiful, though... – Skytiger Sep 26 '13 at 10:13

Table not taking up 100% of the screen width

6 Answers6