3

Tenho uma tabela HTML com 3 colunas e 3 linhas e para cada célula desta tabela tenho outra tabela HTML com 3 colunas e 2 linhas e estou tentando fazer com que ela ocupe de forma uniforme a tela inteira.

Tentei adicionar width:100% e height:100% para cada linha e coluna e não deu certo.

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

1 Resposta 1

2

Coloque no seu CSS os seguintes estilos:

body{
   height: 100vh;
}

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

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

E coloque na tabela principal a classe h-100 (100% de altura):

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

Para a tabela pegar a altura da janela, o body precisa ter 100% de altura (100vh). A classe .table-responsive, que originalmente é display: block, deve ser alterada para display: table, e a classe .table possui uma margem inferior, que deve ser eliminada com margin-bottom: 0, para evitar um scroll.

Exemplo: execute em tela cheia para melhor visualização.

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>
<script src="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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .