如何将内部设置为全宽

时间：2019-01-24 10:56:52

标签： html css css3 bootstrap-4

我正在开发可折叠表，例如每行单击时都使用外部和内部表。

我的代码：

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>

我尝试在实际表格之间的每一层上放置宽度：100％，但没有帮助。
试过的例子都没有用：

table {
    width: 100%;       
}

并且其中一张表的宽度没有100％，

td > table { width:100%; }

使用Bootstrap v4.1 在内部table tr td中未设置全角吗？如何将内部表格设置为全宽？

2 个答案:

答案 0 :(得分：0)

您可以使用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>

答案 1 :(得分：0)

希望这对您有帮助。以下是供您参考的代码codepen 

[{"name": "ABC"},{"name": "XYZ"}]
相关问题
最新问题