텍스트와 이미지를 함께 그룹화하십시오.

Question

I 느낌이은 간단해야합니다. 그러나 나는 운이별로 없다.

나는 테이블이있는 웹 사이트를 만들고 있습니다. 테이블에는 열과 이미지를 설명하는 텍스트가 포함 된 헤더가 있습니다. 더 많은 정보를 얻으려면 사용자가 이미지 위로 마우스를 가져갈 수 있습니다.

그러나 나는 텍스트와 이미지가 서로 정렬되지 않는다는 것을 알고 있습니다. 대신 이미지가 새 줄로 묶입니다. 얇은 기둥의 경우

나는 그런 일이 발생하지 않도록하고 싶습니다. 지금까지 내가 가진 유일한 성공은 테이블 헤더에 다른 테이블을 사용하는 것입니다. 어리석은 것 같습니다.

어떻게하면됩니까?

일부 시도로 내 html.

<table class="inline"> 
    <tr> 
     <th>TextA <img class="info" src="/images/info.png" onmouseover="ShowInfo()"/></th> 
     <th><table><tr><td>TextB</td> <td><img class="info" src="/images/info.png" onmouseover="ShowInfo()"/></td></tr></table></th> 
     <th><span style="display: inline-block;">TextC <img class="info" src="/images/info.png" onmouseover="ShowInfo()"/></span></th> 
     <th>TextD <img class="info" src="/images/info.png" onmouseover="ShowInfo()"/></th> 
     <th>TextE <img class="info" src="/images/info.png" onmouseover="ShowInfo()"/></th> 
    </tr> 
    </table> 

내 스타일 시트

.info { 
    width: 16px; 
    height: 16px; 
    float: right; 
} 

.inline { 
    white-space: nowrap; 
    /*overflow: hidden;*/ 
    /*display: inline-block; 
    table-layout:fixed;*/ 
} 

Answer 1

이미지와 텍스트는 기본적으로 모두 인라인 요소입니다. 충분한 공간을 확보하지 못하면 다음 행으로 넘어갑니다.

th { 
    white-space: nowrap; 
} 

이 힘을 같은 줄에 모든 인라인 요소 (두 display: inline 및 display: inline-block)를 유지하고 넓은하게 만들기 위해 th의 경계를 밀어 : 설정하여 그 수정.

또한 특정 레이아웃을 달성하기 위해 테이블을 사용하지 않아야합니다. 표는 표 형식의 데이터를 포함해야합니다. 스타일링을 처리하기 위해 CSS가 개발되었습니다.