텍스트가 표에 맞지 않습니다. - HTML

Question

많은 솔루션을 거친 후에 제 문제가 해결 될 수 있습니다.

저는 인 <td>입니다. 그러나이 내부 테이블 안의 텍스트는 텍스트 클립에 맞지 않습니다. 나는 overflow:hidden, <table>에 table-layout: fixed, <td>에 word-wrap:break-word과 같은 여러 가지를 시도했지만 여전히 문제를 해결하지 못했습니다.

여기 내 코드입니다 :

<table id="table1"> 
<tr> 
    <td id="td1"> 
     <img src="http://lorempixel.com/165/232" /> 
    </td> 
    <td id="td2">Long text goes here</td> 
    <td id="td3" rowspan="7"> 
     <table id="table2"> 
      <tr> 
       <td>Long text goes here</td> 
      </tr> 
     </table> 
    </td> 
</tr> 

그리고 여기에 CSS의 :

#table1 { 
    width: 765px; 
    border: 1px solid red; 
    border-spacing: 0; 
    padding: 0; 
} 
#td1 { 
    width: 175px; 
    vertical-align: top; 
} 
#td2 { 
    vertical-align: top; 
} 
#td3 { 
    width: 180px; 
    vertical-align: top; 
    background-color: #F3F3F3; 
} 
#table2 { 
    width: 100%; 
    border: 1px solid blue; 
    border-spacing: 0; 
    padding: 8px; 
} 

내부 테이블 클립 안으로 밖으로 내용. 아무도 내부 테이블에 클리핑없이 적절한 내용을 포함 할 수 있도록 솔루션을 제공하십시오.

JSFiddle

Answer 1

이것은 훨씬 간단하게 달성 될 수 있습니다. display: table; 및 display: table-cell;으로 해보겠습니다. 비슷한 동작을하는 블록 요소를 표에 배치 할 수 있지만 유지 보수가 훨씬 쉽고 간단합니다.

Read more on CSS display

Have a Fiddle!

CSS

.box { 
    border: solid 1px #CCC; 
    display: table; 
    padding: 10px; 
} 
.box div { 
    display: table-cell; 
    vertical-align: top; 
    margin: 10px; 
    padding: 10px; 
} 
.right { 
    border: solid 1px #F00; 
} 

HTML

<div class="box"> 
    <div class="left"> 
     <img src="http://placehold.it/200" /> 
    </div> 
    <div class="center">Content</div> 
    <div class="right">Content</div> 
</div>