표시된 내용을 시각적으로 자르려면 <td> 너비를 어떻게 설정해야 합니까?
-
20-08-2019 - |
문제
하위 요소가 시각적으로 잘리는 지점에 도달할 때까지 잘 작동하는 테이블의 열 너비를 설정하려고 합니다.그러면 크기가 더 작아지지 않습니다.("시각적으로 잘림" - 맞지 않는 내용은 다음 열 뒤에 숨겨져 있는 것으로 나타남)
내 문제를 보여주는 몇 가지 샘플 코드는 다음과 같습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script language="javascript" type="text/javascript">
var intervalID = null;
function btn_onClick()
{
// keep it simple, only click once
var btn = document.getElementById("btn");
btn.disabled = true;
// start shrinking
intervalID = window.setInterval( "shrinkLeftCell();", 100);
}
function shrinkLeftCell()
{
// get elements
var td1 = document.getElementById("td1");
var td2 = document.getElementById("td2");
// initialize for first pass
if( "undefined" == typeof( td1.originalWidth))
{
td1.originalWidth = td1.offsetWidth;
td1.currentShrinkCount = td1.offsetWidth;
}
// shrink and set width size
td1.currentShrinkCount--;
td1.width = td1.currentShrinkCount; // does nothing if truncating!
// set reporting values in right cell
td2.innerHTML = "Desired Width : ["
+ td1.currentShrinkCount
+ "], Actual : ["
+ td1.offsetWidth + "]";
// Stop shrinking
if( 1 >= td1.currentShrinkCount)
window.clearInterval(intervalID);
}
</script>
</head>
<body>
<table width="100%" border="1">
<tr>
<td id="td1">
Extra_long_filler_text
</td>
<td id="td2">
Desired Width : [----], Actual : [----]
</td>
</tr>
</table>
<button id="btn" onclick="btn_onClick();">Start</button>
</body>
</html>
나는 다음을 포함하여 다양한 방법으로 너비를 설정해 보았습니다.
td1.offsetWidth = td1.currentShrinkCount;
그리고
td1.width = td1.currentShrinkCount + "px";
그리고
td1.style.width = td1.currentShrinkCount + "px";
그리고
td1.style.posWidth = td1.currentShrinkCount;
그리고
td1.scrollWidth = td1.currentShrinkCount;
그리고
td1.style.overflow = "hidden";
td1.width = td1.currentShrinkCount;
그리고
td1.style.overflow = "scroll";
td1.width = td1.currentShrinkCount;
그리고
td1.style.overflow = "auto";
td1.width = td1.currentShrinkCount;
DIV를 사용할 수도 있지만 테이블이 바인딩된 컨트롤에서 생성되기 때문에 사용하지 않는 것을 선호하고 asp.net 컨트롤을 다시 작성하고 싶지도 않습니다.
그렇긴 하지만, 나는 최후의 노력으로 최소한 각 'td1의 내용을 DIV로 래핑할 수 있고 오버플로로 인해 문제가 해결될 것이라고 생각했습니다.
<td id="td1">
Extra_long_filler_text
</td>
~와 함께
<td id="td1" style="overflow:hidden;">
<div style="margin=0;padding:0;overflow:hidden;">
Extra_long_filler_text
</div>
</td>
작동하지 않았습니다.
내용을 시각적으로 자르도록 너비를 설정하는 방법을 아는 사람이 있습니까?
그런데-내 대상 브라우저는 IE7입니다.다른 브라우저는 내부 앱이므로 지금은 중요하지 않습니다.
해결책
방금 추가해봤는데 table-layout: fixed;
~로 <table>
IE7에서는 저에게 효과적이었습니다.
고정 테이블 레이아웃에서 가로 레이아웃은 셀 내용이 아닌 테이블 너비, 열 너비에만 의존합니다.
확인해 보세요 문서.
다른 팁
CSS 솔루션
"Truncate"는 당신이 찾고 있는 단어가 아닐 수도 있습니다.넘쳐나는 문자를 숨기고 싶을 수도 있습니다.그렇다면 컨테이너의 선언된 제한을 넘어서 확장되는 모든 콘텐츠를 숨기는 CSS 속성 "오버플로"를 살펴보세요.
td div.masker {
height:25px;
width:100px;
overflow:hidden;
}
<td>
<div class="masker">
This is a string of sample text that
should be hidden when it reaches out of the bounds of the parent controller.
</div>
</td>
자바스크립트 솔루션
실제로 컨테이너 내의 텍스트를 자르려면 오른쪽에서 한 문자를 제거하고 상위 너비를 테스트한 다음 상위 너비가 선언된 너비와 일치할 때까지 계속해서 문자를 제거하고 상위 너비를 테스트해야 합니다.
while (parent.width > desiredWidth) {
remove one char from right-side of child-text
}
<td id="td1" style="overflow-x:hidden;">
해야한다
<td id="td1" style="overflow:hidden;">
Overflow-x는 현재 CSS3의 일부인 Microsoft CSS 속성입니다.나는 이전의 오버플로 속성을 고수하겠습니다.
편집하다:
Paolo가 언급했듯이 table-layout:fixed;도 추가해야 합니다.그리고 테이블의 너비를 지정합니다.전체 예제는 다음과 같습니다.
<html>
<head>
<style>
table
{
table-layout:fixed;
width:100px;
}
td
{
overflow:hidden;
width:50px;
border-bottom: solid thin;
border-top:solid thin;
border-right:solid thin;
border-left:solid thin;
}
</style>
</head>
<body>
<table>
<tr><td>Some_long_content</td><td>Short</td></tr>
</table>
</body>
</html>
내가 아는 한, 표 셀은 내용을 수용할 수 있도록 항상 늘어납니다.
특정 양 이상의 콘텐츠가 포함된 테이블 셀의 데이터를 동적으로 자르는 Javascript를 사용하는 것에 대해 생각해 보셨나요?또는 서버 측에서 이 작업을 더 쉽게 수행할 수 있습니다.
jQuery 또는 일반 자바스크립트를 사용하여 셀 내용을 div 태그로 묶고 대신 고정 너비와 오버플로:숨김을 설정할 수 있습니다.아름답지는 않지만 효과가 있을 것입니다.
예상 시간:
<td><div style="width:30px;overflow:hidden">Text goes here</div></td>
DIV는 경계 요소이므로 여기서 너비를 설정해야 합니다.