如何做一个表内的滚动条，以及使行占100％的宽度

Question

我试图创建一个4列的表和至少12行与overflow-y：scroll。该页面完全响应。我明白，如果我需要添加一个滚动条到桌子上，我需要使它显示显示：thead以及tbody。现在我面临的问题是我不能让我的曲目有100％的宽度。我试图调整我的代码几个小时，似乎无法达成任何解决方案。连接下面的jsfiddle链接

https://jsfiddle.net/kuau4ace/ ` 我只是试图对此使用HTML和CSS。

请帮忙！ <table>

Answer 1

通过使THEAD和TBODY到显示：块你改变表的属性，这就是为什么TR不拿宽度：100％。

试试这个代码

$(document).ready(function(){ 
 
    var body=$('.template_table').clone(); 
 
    body.addClass('body'); 
 
    $('.table-wrapper').append("<div class='table-body'></div>"); 
 
    $('.table-body').append(body); 
 
    var curr = []; 
 
    $("table.body th").each(function(i) { 
 
\t \t \t \t var tColumnWidth = $(this).width(); 
 
\t \t \t \t curr.push(tColumnWidth); 
 
    }); 
 
    $("table:first-child th").each(function(i){ 
 
    \t \t $(this).width(curr[i]); 
 
    }); 
 
    $("table.body thead").empty(); 
 
    $(".table-wrapper>table tbody").empty(); 
 
});

.template_table{ 
 
    border:1px solid #000; 
 
    width:100%; 
 
    padding: 0; 
 
} 
 
.template_table thead{ 
 
    background:#323333; 
 
    height: 30px; 
 
    width: 100%; 
 
} 
 
.template_table tbody{ 
 
    height: 210px; 
 
    width: 100%; 
 
    overflow-x: hidden; 
 
    overflow-y: auto; 
 
} 
 
.template_table th{ 
 
    border:1px solid #000; 
 
    border-left:0; 
 
    border-right:0 
 
} 
 
.template_table th select{ 
 
    background:none; 
 
    border:none; 
 
    border-right:1px solid #323232; 
 
    color:#fff; 
 
    padding:5px; 
 
    width:80%; 
 
} 
 
.template_table th{ 
 
    width:330px; 
 
} 
 
.template_table th:first-child{ 
 
    width:80px; 
 
    border:1px solid #000; 
 
} 
 
.template_table th:nth-child(2){ 
 
    width:220px; 
 
    border:1px solid #000; 
 
} 
 
.template_table td:first-child{ 
 
    width:80px; 
 
} 
 
.template_table td:nth-child(2){ 
 
    width:220px; 
 
} 
 
.template_table td{ 
 
    width:220px; 
 
    color: #c3bfbf; 
 
    border-bottom:1px solid #000; 
 
} 
 
.template_table tbody tr:hover td{ 
 
    background:#676767; 
 
    color:#fff; 
 
} 
 

 
.template_table th{ 
 
    border:1px solid #000; 
 
    border-left:0; 
 
    border-right:0; 
 
} 
 
.template_table th select{ 
 
    background:none; 
 
    border:none; 
 
    border-right:1px solid #323232; 
 
    color:#fff; 
 
    padding:5px; 
 
    width:80%; 
 
} 
 
.template_table th:first-child{ 
 
    width:80px; 
 
    border:1px solid #000; 
 
} 
 
.template_table th:nth-child(2){ 
 
    width:220px; 
 
    border:1px solid #000; 
 
} 
 
.template_table td:first-child{ 
 
    width:17%; 
 
} 
 
.template_table td:nth-child(2){ 
 
    width:37%; 
 
} 
 
.template_table td:nth-child(3) { 
 

 
} 
 
.template_table td{ 
 
    color:#807c7c; 
 
    border-bottom:1px solid #000; 
 
} 
 
.template_table tbody tr:hover td{ 
 
    background:#676767; 
 
    color:#fff; 
 
} 
 
tbody tr{ 
 
    cursor:pointer; 
 
    } 
 
.table-wrapper { 
 
    width: calc(100% - 20px); 
 
} 
 
.table-body { 
 
    height: 200px; 
 
    overflow-x: hidden; 
 
    overflow-y: auto; 
 
    width: calc(100% + 15px); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div class="table-wrapper"> 
 
<table class="col-xs-12 template_table"> 
 
           <thead> 
 
           <tr> 
 
            <th></th> 
 
            <th> 
 
             <select> 
 
              <option>Page Name </option> 
 
             </select> 
 
            </th> 
 
            <th> 
 
             <select> 
 
              <option>Template</option> 
 
             </select> 
 
            </th> 
 
           </tr> 
 
           </thead> 
 
           <tbody> 
 
           <tr> 
 
            <td></td> 
 
            <td>Video Source 1 </td> 
 
            <td>Video Clip</td> 
 
           </tr> 
 
           <tr> 
 
            <td></td> 
 
            <td>ManningL3 </td> 
 
            <td>Player L3</td> 
 

 
           </tr> 
 
           <tr> 
 
            <td></td> 
 
            <td>Boyriven </td> 
 
            <td>Talent ID</td> 
 
           </tr> 
 
           <tr> 
 
            <td></td> 
 
            <td>Halftime Stats </td> 
 
            <td>Full Screen Stats</td> 
 
           </tr> 
 
           <tr> 
 
            <td></td> 
 
            <td>Locator </td> 
 
            <td>Full Screen Locator</td> 
 
           </tr> 
 
           <tr> 
 
            <td></td> 
 
            <td>Locator </td> 
 
            <td>Full Screen Locator</td> 
 
           </tr> 
 
           <tr> 
 
            <td></td> 
 
            <td>Locator </td> 
 
            <td>Full Screen Locator</td> 
 
           </tr> 
 
           <tr> 
 
            <td></td> 
 
            <td>Time </td> 
 
            <td>Bug</td> 
 
           </tr> 
 
           <tr> 
 
            <td></td> 
 
            <td>Singular Info </td> 
 
            <td>Topic L3</td> 
 
           </tr> 
 
           <tr> 
 
            <td></td> 
 
            <td>Los Angeles</td> 
 
            <td>Locator</td> 
 
           </tr> 
 
           <tr> 
 
            <td></td> 
 
            <td>Lewandowski </td> 
 
            <td>Player L3</td> 
 
           </tr> 
 
           <tr> 
 
            <td></td> 
 
            <td>Lewandowski </td> 
 
            <td>Player L3</td> 
 
           </tr> 
 
           </tbody> 
 
          </table> 
 
          </div>