td wdth없이 tbody 안에 세로 스크롤이있는 100 % 너비 HTML 표

게시자 : Hashem Qolami가 게시 한 게시물 HTML table with 100% width, with vertical scroll inside tbody에 해결책을 시도했지만 문제가 있습니다.td wdth없이 tbody 안에 세로 스크롤이있는 100 % 너비 HTML 표

Tried Scenario-Issue

경우 추가 세부 사항을 요구, 내가 당신을 채워 보자.

여러 게시물을 사용해 보았습니다. 어디에서나 td의 고정 너비는 tbody입니다. 하지만 tbody의 데이터에 따르면 동적 폭이 필요합니다.

js, css의 다른 섹션이있을 때 사이트에서 작업하고 있습니다. 하지만 모든 것을 하나의 html로 결합하면 작동하지 않습니다. 내 HTML 이미지 : 크기를 조정할 때 HTML Image

// Change the selector if needed 
 
var $table = $('table.scroll'), 
 
    $bodyCells = $table.find('tbody tr:first').children(), 
 
    colWidth; 
 

 
// Adjust the width of thead cells when window resizes 
 
$(window).resize(function() { 
 
    // Get the tbody columns width array 
 
    colWidth = $bodyCells.map(function() { 
 
    return $(this).width(); 
 
    alert("hii"); 
 
    }).get(); 
 

 
    // Set the width of thead columns 
 
    $table.find('thead tr').children().each(function(i, v) { 
 
    $(v).width(colWidth[i]); 
 
    }); 
 
}).resize(); // Trigger resize handler

table.scroll { 
 
    /* width: 100%; */ 
 
    /* Optional */ 
 
    /* border-collapse: collapse; */ 
 
    border-spacing: 0; 
 
    border: 2px solid black; 
 
} 
 

 
table.scroll tbody, 
 
table.scroll thead { 
 
    display: block; 
 
} 
 

 
thead tr th { 
 
    height: 30px; 
 
    line-height: 30px; 
 
    /* text-align: left; */ 
 
} 
 

 
table.scroll tbody { 
 
    height: 100px; 
 
    overflow-y: auto; 
 
    overflow-x: hidden; 
 
} 
 

 
tbody { 
 
    border-top: 2px solid black; 
 
} 
 

 
tbody td, 
 
thead th { 
 
    /* width: 20%; */ 
 
    /* Optional */ 
 
    border-right: 1px solid black; 
 
    /* white-space: nowrap; */ 
 
} 
 

 
tbody td:last-child, 
 
thead th:last-child { 
 
    border-right: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 

 
<table class="scroll"> 
 
    <thead> 
 
    <tr> 
 
     <th>Head 1</th> 
 
     <th>Head 2</th> 
 
     <th>Head 3</th> 
 
     <th>Head 4</th> 
 
     <th>Head 5</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>Content 1</td> 
 
     <td>Content 2</td> 
 
     <td>Content 3</td> 
 
     <td>Content 4</td> 
 
     <td>Content 5</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Content 1</td> 
 
     <td>Lorem ipsum dolor sit amet.</td> 
 
     <td>Content 3</td> 
 
     <td>Content 4</td> 
 
     <td>Content 5</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Content 1</td> 
 
     <td>Content 2</td> 
 
     <td>Content 3</td> 
 
     <td>Content 4</td> 
 
     <td>Content 5</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Content 1</td> 
 
     <td>Content 2</td> 
 
     <td>Content 3</td> 
 
     <td>Content 4</td> 
 
     <td>Content 5</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Content 1</td> 
 
     <td>Content 2</td> 
 
     <td>Content 3</td> 
 
     <td>Content 4</td> 
 
     <td>Content 5</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Content 1</td> 
 
     <td>Content 2</td> 
 
     <td>Content 3</td> 
 
     <td>Content 4</td> 
 
     <td>Content 5</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Content 1</td> 
 
     <td>Content 2</td> 
 
     <td>Content 3</td> 
 
     <td>Content 4</td> 
 
     <td>Content 5</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

출처

2017-09-14 Harry

의 주석 테이블 폭

table.scroll { 
    width: 100%; 
    /* Optional */ 
    /* border-collapse: collapse; */ 
    border-spacing: 0; 
    border: 2px solid black; 
}

이 this

세포를 시도하십시오 그에 따라 대응하고 있습니다.

출처

2017-09-14 03:10:09 rafon

도움을 주셔서 감사합니다.하지만, 내가 HTML을 작동 시키려고 노력할 때 나는 틀린 생각을하고 있습니다.이 코드는 다른 소스 코드 템플릿을 사용하려고 할 때 작동합니다. 당신은 제발 제안 할 수 .. 내가 편집에서 이미지로 내 HTML의 스크린 샷을 추가했습니다 .. – Harry

td wdth없이 tbody 안에 세로 스크롤이있는 100 % 너비 HTML 표

답변

관련 문제