How to make the HTML table inside another table occupy the entire screen?

Question

How to make the HTML table inside another table occupy the entire screen?

Navigation

#1 by (2 votes)

3

I have an HTML table with 3 columns and 3 rows and for each cell in this table I have another HTML table with 3 columns and 2 lines and I'm trying to make it work evenly across the entire screen.

I tried to add width:100% and height:100% to each row and column and did not work.

    <table class="table  table-responsive">
        <tbody>
            <tr>
                <td align="center">
                    <table class="table table-responsive" id="tb1">
                        <thead>
                            <tr>
                                <th colspan="3">tb1</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>2</td>
                                <td>3</td>
                            </tr>
                            <tr>
                                <td>4</td>
                                <td>5</td>
                                <td>6</td>
                            </tr>
                        </tbody>
                    </table>
                </td>
                <td align="center">
                    <table class="table table-responsive" id="tb2">
                        <thead>
                            <tr>
                                <th colspan="3" align="center">tb2</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>7</td>
                                <td>8</td>
                                <td>9</td>
                            </tr>
                            <tr>
                                <td>10</td>
                                <td>11</td>
                                <td>12</td>
                            </tr>
                        </tbody>
                    </table>
                </td>
                <td align="center">
                    <table class="table table-responsive" id="tb3">
                        <thead>
                            <tr>
                                <th colspan="3" align="center">tb3</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>13</td>
                                <td>14</td>
                                <td>15</td>
                            </tr>
                            <tr>
                                <td>16</td>
                                <td>17</td>
                                <td>18</td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
            <tr>
                <td align="center">
                    <table class="table table-responsive" id="tb4">
                        <thead>
                            <tr>
                                <th colspan="3" align="center">tb4</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>19</td>
                                <td>20</td>
                                <td>21</td>
                            </tr>
                            <tr>
                                <td>22</td>
                                <td>23</td>
                                <td>24</td>
                            </tr>
                        </tbody>
                    </table>
                </td> 
                <td align="center">
                    <table class="table table-responsive" id="tb5">
                        <thead>
                            <tr>
                                <th colspan="3" align="center">tb5</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>25</td>
                                <td>26</td>
                                <td>27</td>
                            </tr>
                            <tr>
                                <td>28</td>
                                <td>29</td>
                                <td>30</td>
                            </tr>
                        </tbody>
                    </table>
                </td>
                <td align="center">
                    <table class="table table-responsive" id="tb6">
                        <thead>
                            <tr>
                                <th colspan="3" align="center">tb6</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>31</td>
                                <td>32</td>
                                <td>33</td>
                            </tr>
                            <tr>
                                <td>34</td>
                                <td>35</td>
                                <td>36</td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
            <tr>
                <td align="center">
                    <table class="table table-responsive" id="tb7">
                        <thead>
                            <tr>
                                <th colspan="3" align="center">tb7</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>37</td>
                                <td>38</td>
                                <td>39</td>
                            </tr>
                            <tr>
                                <td>40</td>
                                <td>41</td>
                                <td>42</td>
                            </tr>
                        </tbody>
                    </table>
                </td>
                <td align="center">
                    <table class="table table-responsive" id="tb8">
                        <thead>
                            <tr>
                                <th colspan="3" align="center">tb8</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>43</td>
                                <td>44</td>
                                <td>45</td>
                            </tr>
                            <tr>
                                <td>46</td>
                                <td>47</td>
                                <td>48</td>
                            </tr>
                        </tbody>
                    </table>
                </td>
                <td align="center">
                    <table class="table table-responsive" id="tb9">
                        <thead>
                            <tr>
                                <th colspan="3" align="center">tb9</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>49</td>
                                <td>50</td>
                                <td>51</td>
                            </tr>
                            <tr>
                                <td>52</td>
                                <td>53</td>
                                <td>54</td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>

html css twitter-bootstrap table

asked by anonymous 24.11.2018 / 23:35

1 answer

Success message with ajax with boostrap validation 4 How to play fade in effect of modal bootstrap for dialog jquery ui?

score 2 · Answer 1

Put the following styles into your CSS:

body{
   height: 100vh;
}

.table-responsive{
   display: table !important;
}

.table{
   margin-bottom: 0 !important;
}

And put in the main table the class h-100 (100% height):

<table class="table table-responsive h-100">

For the table to get the height of the window, the body must have 100% height ( 100vh ). The .table-responsive class, which originally is display: block , should be changed to display: table , and the .table class has a lower margin, which must be eliminated with margin-bottom: 0 , to avoid a scroll.

Example: run fullscreen for better viewing.

body{
   height: 100vh;
}

.table-responsive{
   display: table !important;
}

.table{
   margin-bottom: 0 !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<table class="table table-responsive h-100">
     <tbody>
         <tr>
             <td align="center">
                 <table class="table table-responsive" id="tb1">
                     <thead>
                         <tr>
                             <th colspan="3">tb1</th>
                         </tr>
                     </thead>
                     <tbody>
                         <tr>
                             <td>1</td>
                             <td>2</td>
                             <td>3</td>
                         </tr>
                         <tr>
                             <td>4</td>
                             <td>5</td>
                             <td>6</td>
                         </tr>
                     </tbody>
                 </table>
             </td>
             <td align="center">
                 <table class="table table-responsive" id="tb2">
                     <thead>
                         <tr>
                             <th colspan="3" align="center">tb2</th>
                         </tr>
                     </thead>
                     <tbody>
                         <tr>
                             <td>7</td>
                             <td>8</td>
                             <td>9</td>
                         </tr>
                         <tr>
                             <td>10</td>
                             <td>11</td>
                             <td>12</td>
                         </tr>
                     </tbody>
                 </table>
             </td>
             <td align="center">
                 <table class="table table-responsive" id="tb3">
                     <thead>
                         <tr>
                             <th colspan="3" align="center">tb3</th>
                         </tr>
                     </thead>
                     <tbody>
                         <tr>
                             <td>13</td>
                             <td>14</td>
                             <td>15</td>
                         </tr>
                         <tr>
                             <td>16</td>
                             <td>17</td>
                             <td>18</td>
                         </tr>
                     </tbody>
                 </table>
             </td>
         </tr>
         <tr>
             <td align="center">
                 <table class="table table-responsive" id="tb4">
                     <thead>
                         <tr>
                             <th colspan="3" align="center">tb4</th>
                         </tr>
                     </thead>
                     <tbody>
                         <tr>
                             <td>19</td>
                             <td>20</td>
                             <td>21</td>
                         </tr>
                         <tr>
                             <td>22</td>
                             <td>23</td>
                             <td>24</td>
                         </tr>
                     </tbody>
                 </table>
             </td> 
             <td align="center">
                 <table class="table table-responsive" id="tb5">
                     <thead>
                         <tr>
                             <th colspan="3" align="center">tb5</th>
                         </tr>
                     </thead>
                     <tbody>
                         <tr>
                             <td>25</td>
                             <td>26</td>
                             <td>27</td>
                         </tr>
                         <tr>
                             <td>28</td>
                             <td>29</td>
                             <td>30</td>
                         </tr>
                     </tbody>
                 </table>
             </td>
             <td align="center">
                 <table class="table table-responsive" id="tb6">
                     <thead>
                         <tr>
                             <th colspan="3" align="center">tb6</th>
                         </tr>
                     </thead>
                     <tbody>
                         <tr>
                             <td>31</td>
                             <td>32</td>
                             <td>33</td>
                         </tr>
                         <tr>
                             <td>34</td>
                             <td>35</td>
                             <td>36</td>
                         </tr>
                     </tbody>
                 </table>
             </td>
         </tr>
         <tr>
             <td align="center">
                 <table class="table table-responsive" id="tb7">
                     <thead>
                         <tr>
                             <th colspan="3" align="center">tb7</th>
                         </tr>
                     </thead>
                     <tbody>
                         <tr>
                             <td>37</td>
                             <td>38</td>
                             <td>39</td>
                         </tr>
                         <tr>
                             <td>40</td>
                             <td>41</td>
                             <td>42</td>
                         </tr>
                     </tbody>
                 </table>
             </td>
             <td align="center">
                 <table class="table table-responsive" id="tb8">
                     <thead>
                         <tr>
                             <th colspan="3" align="center">tb8</th>
                         </tr>
                     </thead>
                     <tbody>
                         <tr>
                             <td>43</td>
                             <td>44</td>
                             <td>45</td>
                         </tr>
                         <tr>
                             <td>46</td>
                             <td>47</td>
                             <td>48</td>
                         </tr>
                     </tbody>
                 </table>
             </td>
             <td align="center">
                 <table class="table table-responsive" id="tb9">
                     <thead>
                         <tr>
                             <th colspan="3" align="center">tb9</th>
                         </tr>
                     </thead>
                     <tbody>
                         <tr>
                             <td>49</td>
                             <td>50</td>
                             <td>51</td>
                         </tr>
                         <tr>
                             <td>52</td>
                             <td>53</td>
                             <td>54</td>
                         </tr>
                     </tbody>
                 </table>
             </td>
         </tr>
     </tbody>
 </table>