html 표 셀 너비-고정 너비, 긴 단어 줄 바꿈/자름



css user-interface (6)

다양한 길이의 텍스트가있는 셀이 포함 된 표가 있습니다. 모든 표 셀의 너비가 동일해야합니다. 긴 단어를 잘라내거나 긴 단어로 휴식을 강요한다는 것은 괜찮습니다.

내가이 일을하는 방법을 알아 내지 못한다.

내부 클라이언트 응용 프로그램 용이므로 IE6 및 IE7에서만 작동해야합니다.

예제 페이지는 다음과 같습니다. onereallylongword 포함하는 세포는 기분 onereallylongword 하나입니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
        td { width: 30px; }
    </style>
</head>
<body>
    <table border="2">
        <tr>
            <td>word</td>
            <td>two words</td>
            <td>onereallylongword</td>
        </tr>
    </table>
</body>
</html>

Answer #1

는 DIV를 사용하고 overflow-x:auto 를 사용하여 긴 줄의 코드에서 비슷한 문제를 해결했습니다. CSS는 단어를 해독 할 수 없습니다.


Answer #2

만약 당신이 긴 줄 바꿈을하고 싶다면 새로운 줄에 다음 테이블 ID 호출에 CSS 속성을 사용하십시오. table-layout:fixed; 그렇지 않으면 간단히 CSS는 새 줄에 긴 텍스트를 나눌 수 없습니다.


Answer #3
<style type="text/css">
td { word-wrap: break-word;max-width:50px; }            
</style>

Answer #4

이 시도:

text-overflow: ellipsis; 
overflow: hidden; 
white-space:nowrap;

Answer #5

try td {background-color:white}

그것은 이전 칼럼의 긴 텍스트에 의해 짓밟 히고 싶지 않은 칼럼에서만 효과가있었습니다.


Answer #6

IE6 / 7에 대한 해결책이 필요하다는 것을 알았지 만 다른 누구에게도 이것을 던지고 있습니다.

table-layout: fixed 사용할 수 없다면 table-layout: fixed 있고 IE <9를 신경 쓰지 않아도됩니다. 모든 브라우저에서 작동합니다.

td {
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: nowrap;
    max-width: 30px;
}




html-table