0
테이블에 여러 coloumns가 있습니다. 표의 머리글이 고정되어 있습니다. 헤더의 일부 열 (마지막 열)은 패널 내부에 나열되지 않습니다. 첨부 된 데모를 보시려면 여기를 클릭하십시오헤더에서 수평 스크롤 막대가 작동하지 않습니다.
coloumns가 더 많은 수평 스크롤바가 나타나지만 문제는 헤더가 스크롤링되지 않고 패널 외부에 나열됩니다. 데모 here을 찾으십시오.
html 코드 :
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body" id="modal-body">
<table class="table" border="1">
<thead>
<tr>
<td>Namffffffffffffffffffffffffe</td>
<td>phone</td>
<td>Address</td>
<td>Street</td>
<td>City</td>
<td>Pin</td>
<td>Comments</td>
<td>info</td>
<td>Amount</td>
<td>percentage</td>
<td>total</td>
</tr>
</thead>
<tbody>
<tr>
<td>AAAAdddddddddddddddddddddddd</td>
<td>323232</td>
<td>BBBBB</td>
<td>aasdd</td>
<td>dfgdfg</td>
<td>1234</td>
<td>adsadsadashgdhggdhsdfsdgfghsdgfsgdfhsdhfgsdfgsdhfgsdgfsdfg</td>
<td>adasdsadasd</td>
<td>12312</td>
<td>4</td>
<td>555</td>
</tr>
<tr>
<td>AAAAdddddddddddddddddddddddd</td>
<td>323232</td>
<td>BBBBB</td>
<td>aasdd</td>
<td>dfgdfg</td>
<td>1234</td>
<td>adsadsadashgdhggdhsdfsdgfghsdgfsgdfhsdhfgsdfgsdhfgsdgfsdfg</td>
<td>adasdsadasd</td>
<td>12312</td>
<td>4</td>
<td>555</td>
</tr>
<tr>
<td>AAAAdddddddddddddddddddddddd</td>
<td>323232</td>
<td>BBBBB</td>
<td>aasdd</td>
<td>dfgdfg</td>
<td>1234</td>
<td>adsadsadashgdhggdhsdfsdgfghsdgfsgdfhsdhfgsdfgsdhfgsdgfsdfg</td>
<td>adasdsadasd</td>
<td>12312</td>
<td>4</td>
<td>555</td>
</tr>
<tr>
<td>AAAAdddddddddddddddddddddddd</td>
<td>323232</td>
<td>BBBBB</td>
<td>aasdd</td>
<td>dfgdfg</td>
<td>1234</td>
<td>adsadsadashgdhggdhsdfsdgfghsdgfsgdfhsdhfgsdfgsdhfgsdgfsdfg</td>
<td>adasdsadasd</td>
<td>12312</td>
<td>4</td>
<td>555</td>
</tr>
<tr>
<td>AAAAdddddddddddddddddddddddd</td>
<td>323232</td>
<td>BBBBB</td>
<td>aasdd</td>
<td>dfgdfg</td>
<td>1234</td>
<td>adsadsadashgdhggdhsdfsdgfghsdgfsgdfhsdhfgsdfgsdhfgsdgfsdfg</td>
<td>adasdsadasd</td>
<td>12312</td>
<td>4</td>
<td>555</td>
</tr>
<tr>
<td>AAAAdddddddddddddddddddddddd</td>
<td>323232</td>
<td>BBBBB</td>
<td>aasdd</td>
<td>dfgdfg</td>
<td>1234</td>
<td>adsadsadashgdhggdhsdfsdgfghsdgfsgdfhsdhfgsdfgsdhfgsdgfsdfg</td>
<td>adasdsadasd</td>
<td>12312</td>
<td>4</td>
<td>555</td>
</tr> </tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
CSS 코드 :
.modal-body {
overflow-y: auto;
}
tbody {
display:block;
height:200px;
overflow:auto;
}
thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;
}
thead {
width: calc(100% - 1em)
}
table {border-collapse:collapse; table-layout:fixed; width:310px;}
table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}