2
셀에 표시된 전체 셀 콘텐츠가 필요합니다.HTML 오버플로 문제 - 전체 콘텐츠 표시가 필요합니다.
하지만 첫 번째 행의 콘텐츠 첫 번째와 세 번째 셀이 오버플로됩니다. 어떻게하면 테이블 열의 너비를 늘리지 않고도 전체 내용을 표시 할 수 있습니까?
는 누군가가 수정을 제안 할 수 있습니다 : 이것에 대한
function sortTable(f,n){
var rows = $('#mytable tbody tr').get();
rows.sort(function(a, b) {
var A = getVal(a);
var B = getVal(b);
if(A < B) {
return -1*f;
}
if(A > B) {
return 1*f;
}
return 0;
});
function getVal(elm){
var v = $(elm).children('td').eq(n).text().toUpperCase();
if($.isNumeric(v)){
v = parseInt(v,10);
}
return v;
}
$.each(rows, function(index, row) {
$('#mytable').children('tbody').append(row);
});
}
var f_errorStringOfCurrentDataSet = 1;
var f_errorStringOfMatchedDataSet = 1;
var f_testCaseNameOfCurrentDataSet = 1;
var f_regexMatched = 1;
$("#errorStringOfCurrentDataSet").click(function(){
f_errorStringOfCurrentDataSet *= -1;
var n = $(this).prevAll().length;
sortTable(f_errorStringOfCurrentDataSet,n);
});
$("#errorStringOfMatchedDataSet").click(function(){
f_errorStringOfMatchedDataSet *= -1;
var n = $(this).prevAll().length;
sortTable(f_errorStringOfMatchedDataSet,n);
});
$("#testCaseNameOfCurrentDataSet").click(function(){
f_testCaseNameOfCurrentDataSet *= -1;
var n = $(this).prevAll().length;
sortTable(f_testCaseNameOfCurrentDataSet,n);
});
$("#regexMatched").click(function(){
f_regexMatched *= -1;
var n = $(this).prevAll().length;
sortTable(f_regexMatched,n);
});table {
padding: 0;
border-collapse: collapse;
border: 1px solid #ccc;
margin-top: 20px;
table-layout: fixed;
width: 90%;
}
td {
border: 1px solid #ccc;
padding: 5px;
}
tr:nth-child(even) {
background-color: #f2f2f2
}
th, td {
overflow: hidden;
padding: 5px;
text-align: left;
}<!DOCTYPE html>
<html>
<body>
<style>
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<h2>Summary: </h2>
<br>
<br>
<table border="1" id="mytable">
<thead>
<tr>
<th width="25%" id="testCaseNameOfCurrentDataSet">TESTCASENAME</th>
\t \t <th width="5%" id="regexMatched">RegexMatched (Yes/No)</th>
\t \t <th width="25%" id="errorStringOfCurrentDataSet">ERROR_STRING_CURRENT_DATASET</th>
<th width="25%" id="errorStringOfMatchedDataSet">ERROR_STRING_REF_DATASET</th>
<th width="5%">PICTU Detail</th>
</tr>
</thead>
<tbody>
\t \t <tr style="color: red">
<td>moviee.movieemovieemoviee.movieemovieemoviee.movieemovieemoviee.moviee</td>
<td>NO</td>
<td>ABCDE:[bbb-aa-gg 999-99] (Excellent Check) Monkey String ABCDE:[moviee 990-505] moviee to commit 3 small moviee/moviee/moviee: in file /dogg/summariz/abc/mmmm/movieemoviee/moviee/movieemoviee/moviee/movieemoviee/Small/movieemoviee/movieemoviee.1_</td>
<td>ABCDE:[abc-vd-Common 17-69] moviee moviee: moviee moviee moviee moviee moviee moviee</td>
<td><a href=http://mnbvcz01:5601/app/banana#/template/abc-DELETEDD-PICTU?embed=true&reportType=abc&_a=(filters:!(),options:(darkTheme:!f),query:(query_string:(analyze_wildcard:!t,lowercase_DELETEDD_terms:!f,query:'_id:movieemovieemovieemovieemovieemovieemovieemovieemovieemovieemovieemovieemoviee.movieemovieemoviee%20OR%20_id:17.movieemovieemovieemovieemovieemovieemovieemovieemovieemovieemovieemovieemovieemovieemovieemovieemovieemovieemoviee.movieemovieemovieemovieemovieemovieemovieemoviee')),title:'abc%20DELETEDD%20PICTU',uiState:())&_g=(refreshInterval:(display:Off,pause:!f,value:0),time:(from:now-1y,mode:quick,to:now))>link</a></td>
</tr>
\t \t \t \t
</tbody>
</table>
<script>
</script>
</body>
</html>
당신은 바이올린을 추가 할 수 당신에게 유용 내와 테이블 태그를 대체 무엇입니까? – Abhidev
wierd thing은 바이올린에서 너비가 더 많습니다. https://jsfiddle.net/0dqejc96/ – user3570620
ur 바이올린이 손상되었습니다. 스타일 태그를 제거하십시오. – Huelfe