다른 줄의 레이아웃을 오염시키는 HTML 표의 긴 줄

Question

페이지의 레이아웃 역할을하는 html 테이블이 있습니다. 이 테이블은 이런 식입니다 :

Label1 Value1 ErrorMessage 
Label2 Value2 
Label3 Value3 
Label4 Value4a Value4b Value4c Value4d 

내가했습니다 디자인 작업을하려면 : 난 그냥 그렇게 지금은 하나의 라인 아주 큰 수 있습니다 유효성 검사 오류 메시지를 추가

Label1 Value1 
Label2 Value2 
Label3 Value3 
Label4 Value4a Value4b Value4c Value4d 

유효성 검사 메시지가있는 셀에 colspan을 추가하여 테이블 전체에 걸쳐 적용합니다. 테이블을 오버플로하지 않을 정도로 작은 오류 메시지로 작동합니다. 내가 얻는 것 외에도 :

Label1 Value1 Veeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeery long ErrorMessage 
Label2 Value2 
Label3 Value3 
Label4 Value4a Value4b     Value4c    Value4d 

Line 4가 완전히 엉망입니다. 동일한 열의 다른 셀에 대한 공간을 확장하는 대신 오류 메시지 셀 내용이 테이블을 오버플로하도록 지정하는 방법이 있습니까? 어쩌면 마법의 CSS일까요?

Answer 1

는 텍스트, 표 외부에서 텍스트 요소를 확장하려면 중 높은 수준 (계층) 이상이어야한다 테이블 또는 테이블과 관련없이 배치되어야합니다.

.outside 
{ 
    position:absolute; 
} 

당신은 그것에서 보여 얻기 위해 몇 가지 더 포맷을해야 할 것 : 외부 클래스를

Label1 Value1 <span class="outside">Veeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeery long ErrorMessage</span> 
Label2 Value2 
Label3 Value3 
Label4 Value4a Value4b     Value4c    Value4d 

그리고 제공 :

당신은 뭔가를 수행하여 이상을 달성 할 수 보정 위치.

편집 :

그냥 당신은뿐만 아니라 호세의 아이디어를 사용하는 대신 사업부의에 걸쳐있는 경우 포맷이 조금 정리 깨달았다.

table 
{ 
    table-layout:fixed; 
    width:100em; 
} 

Answer 2

이것은 매우 hackish하지만 상황에 따라 다를 수 있습니다. 가능하다면 각 콘텐츠 셀에 대해 정적 너비를 제공하십시오. 그런 다음 너비가없는 셀을 추가하십시오. 그런 다음 마지막 셀을 확장하여 다른 셀을 설정된 너비로 남겨 두어야합니다.

편집 : 사용자의 의견에 기반 오류 메시지에 CSS에서 z-index을 더 입력해볼 수도 있습니다. 이 작업을하려면 position 메시지를 설정해야합니다.

Answer 3

좋아, 여기에 내가 테스트를했습니다 솔루션이고 파이어 폭스 3에서 작동 :

<style type="text/css"> 
#error { 
    width: inherit; 
    overflow: auto; 
    padding: 0; 
    margin: 0; 
} 
</style> 

<table width="400"> 
    <tr> 
    <td width="100">A</td> 
    <td colspan="3" width="300"> 
     <div id="error">Really long line...</div> 
    </td> 
    </tr> 
    <tr> 
    <td>1A</td> 
    <td>1B</td> 
    <td>1C</td> 
    <td>1D</td> 
    </tr> 
    <tr> 
    <td>2A</td> 
    <td>2B</td> 
    <td>2C</td> 
    <td>2D</td> 
    </tr> 
</table>