Как установить внутренний на полную ширину - PullRequest
Новая
       1

Как установить внутренний на полную ширину

0 голосов
/ 24 января 2019

Я разрабатываю складные таблицы, такие как внешняя и внутренняя таблица, для каждого щелчка строки.

Мой код:

HTML: 

<table class="table outerTbl mb-0">
    <thead>
        <tr>
            <th scope="col">SL No.</th>
            <th scope="col">Program Details</th>
            <th scope="col">Program Levels</th>
            <th scope="col">Program Start Date</th>
            <th scope="col">Program End Date</th>
            <th scope="col">Total Duration</th>
            <th scope="col">Start</th>
            <th scope="col">Cacel</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row" class="collapsed" data-toggle="collapse" data-target="#row1" aria-expanded="false" aria-controls="row1">View</th>
            <td>Stay Active & Win</td>
            <td>03</td>
            <td>03/12/2018</td>
            <td>03/02/2019</td>
            <td>5 Days, 240secs.</td>
            <td><img src="images/start.png"></td>
            <td><img src="images/cancel.png"></td>
        </tr>
        <tr id="row1" class="table collapse innerTbl text-center col-11">
            <td>
                <table>
                    <thead>
                        <tr>
                            <th scope="col">Program Details</th>
                            <th scope="col">Program Levels</th>      
                            <th scope="col">Progrma Duration</th>
                            <th scope="col">Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>               
                            <td>Power Up <img src="images/trophy.png"/></td>
                            <td>Level 1</td>
                            <td>240 secs</td>
                            <td>Play</td>              
                        </tr>
                        <tr>               
                            <td>Warriors <img src="images/trophy.png"/></td>
                            <td>Level 2</td>
                            <td>5 Days</td>
                            <td>Play</td>              
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr>
            <th scope="row" class="collapsed" data-toggle="collapse" data-target="#row2" aria-expanded="false" aria-controls="row2">View</th>
            <td>New Year Goals</td>
            <td>01</td>
            <td>01/01/2019</td>
            <td>01/02/2019</td>
            <td>5 Days, 240secs.</td>
            <td><img src="images/start.png"/></td>
            <td><img src="images/cancel.png"/></td>
        </tr>
        <tr id="row2" class="table collapse innerTbl text-center col-11">  
            <td>
                <table >
                    <thead>
                        <tr>
                            <th scope="col">Program Details</th>
                            <th scope="col">Program Levels</th>      
                            <th scope="col">Progrma Duration</th>
                            <th scope="col">Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>               
                            <td>Power Up <img src="images/trophy.png"/></td>
                            <td>Level 1</td>
                            <td>240 secs</td>
                            <td>Play</td>              
                        </tr>
                        <tr>               
                            <td>Warriors <img src="images/trophy.png"/></td>
                            <td>Level 2</td>
                            <td>5 Days</td>
                            <td>Play</td>              
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>  
    </tbody>
</table>

Я пытался поместить width: 100% на каждом уровне между фактической таблицей, но это не помогло.
Пробные примеры ни один из них не работал: 

table {
    width: 100%;       
}

и Одна из таблиц не имеет ширины 100%, добавили эту строку, 

td > table { width:100%; }

Использование Bootstrap v4.1 Для внутреннего table tr td не устанавливается полная ширина? Как установить внутреннюю таблицу на полную ширину?

Ответы [ 2 ]

0 голосов
/ 24 января 2019

Надеюсь, это поможет вам.Ниже приведен код для вашей справки codepen 

<table class="table outerTbl mb-0">
    <thead>
        <tr>
            <th scope="col">SL No.</th>
            <th scope="col">Program Details</th>
            <th scope="col">Program Levels</th>
            <th scope="col">Program Start Date</th>
            <th scope="col">Program End Date</th>
            <th scope="col">Total Duration</th>
            <th scope="col">Start</th>
            <th scope="col">Cacel</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row" class="collapsed" data-toggle="collapse" data-target="#row1" aria-expanded="false" aria-controls="row1">View</th>
            <td>Stay Active & Win</td>
            <td>03</td>
            <td>03/12/2018</td>
            <td>03/02/2019</td>
            <td>5 Days, 240secs.</td>
            <td><img src="images/start.png"></td>
            <td><img src="images/cancel.png"></td>
        </tr>
        <tr id="row1" class="table collapse innerTbl text-center col-11">
            <td colspan="8">
                <table width="100%">
                    <thead>
                        <tr>
                            <th scope="col">Program Details</th>
                            <th scope="col">Program Levels</th>      
                            <th scope="col">Progrma Duration</th>
                            <th scope="col">Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>               
                            <td>Power Up <img src="images/trophy.png"/></td>
                            <td>Level 1</td>
                            <td>240 secs</td>
                            <td>Play</td>              
                        </tr>
                        <tr>               
                            <td>Warriors <img src="images/trophy.png"/></td>
                            <td>Level 2</td>
                            <td>5 Days</td>
                            <td>Play</td>              
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr>
            <th scope="row" class="collapsed" data-toggle="collapse" data-target="#row2" aria-expanded="false" aria-controls="row2">View</th>
            <td>New Year Goals</td>
            <td>01</td>
            <td>01/01/2019</td>
            <td>01/02/2019</td>
            <td>5 Days, 240secs.</td>
            <td><img src="images/start.png"/></td>
            <td><img src="images/cancel.png"/></td>
        </tr>
        <tr id="row2" class="table collapse innerTbl text-center col-11">  
            <td>
                <table >
                    <thead>
                        <tr>
                            <th scope="col">Program Details</th>
                            <th scope="col">Program Levels</th>      
                            <th scope="col">Progrma Duration</th>
                            <th scope="col">Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>               
                            <td>Power Up <img src="images/trophy.png"/></td>
                            <td>Level 1</td>
                            <td>240 secs</td>
                            <td>Play</td>              
                        </tr>
                        <tr>               
                            <td>Warriors <img src="images/trophy.png"/></td>
                            <td>Level 2</td>
                            <td>5 Days</td>
                            <td>Play</td>              
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>  
    </tbody>
</table>
0 голосов
/ 24 января 2019

вы можете использовать style="width: 100vw;"

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" type="text/css" />

<table class="table outerTbl mb-0">
  <thead>
    <tr>
      <th scope="col">SL No.</th>
      <th scope="col">Program Details</th>
      <th scope="col">Program Levels</th>
      <th scope="col">Program Start Date</th>
      <th scope="col">Program End Date</th>
      <th scope="col">Total Duration</th>
      <th scope="col">Start</th>
      <th scope="col">Cacel</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row" class="collapsed"  data-toggle="collapse" data-target="#row1" aria-expanded="false" aria-controls="row1">
        View </th>
      <td>Stay Active &amp; Win</td>
      <td>03</td>
      <td>03/12/2018</td>
      <td>03/02/2019</td>
      <td>5 Days, 240secs.</td>
      <td> <img src="images/start.png"/> </td>
      <td> <img src="images/cancel.png"/> </td>
    </tr>
    <tr id="row1" class="table collapse innerTbl text-center col-11"><td>
      <table style="width: 100vw;">
        <thead>
          <tr>
            <th scope="col">Program Details</th>
            <th scope="col">Program Levels</th>      
            <th scope="col">Progrma Duration</th>
            <th scope="col">Status</th>
          </tr>
        </thead>
        <tbody>
          <tr>               
            <td>Power Up <img src="images/trophy.png"/></td>
            <td>Level 1</td>
            <td>240 secs</td>
            <td>Play</td>            
          </tr>
          <tr>               
            <td>Warriors <img src="images/trophy.png"/></td>
            <td>Level 2</td>
            <td>5 Days</td>
            <td>Play</td>            
          </tr>
        </tbody>
      </table>
      </td>
    </tr>
    <tr>
      <th scope="row" class="collapsed"  data-toggle="collapse" data-target="#row2" aria-expanded="false" aria-controls="row2">View</th>
      <td>New Year Goals</td>
      <td>01</td>
      <td>01/01/2019</td>
      <td>01/02/2019</td>
      <td>5 Days, 240secs.</td>
      <td><img src="images/start.png"/></td>
      <td><img src="images/cancel.png"/></td>
    </tr>
    <tr id="row2" class="table collapse innerTbl text-center col-11">   <td>
      <table style="width: 100vw;">
        <thead>
          <tr>
            <th scope="col">Program Details</th>
            <th scope="col">Program Levels</th>      
            <th scope="col">Progrma Duration</th>
            <th scope="col">Status</th>
          </tr>
        </thead>
        <tbody>
          <tr>               
            <td>Power Up <img src="images/trophy.png"/></td>
            <td>Level 1</td>
            <td>240 secs</td>
            <td>Play</td>            
          </tr>
          <tr>               
            <td>Warriors <img src="images/trophy.png"/></td>
            <td>Level 2</td>
            <td>5 Days</td>
            <td>Play</td>            
          </tr>
        </tbody>
      </table>
      </td>
    </tr>  
  </tbody>
</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...