표

Question

이 비디오에서 봐 주시기 바랍니다 계약을 체결하지, 그것은 내 문제를 설명합니다. 페이지의 크기를 조정하면 테이블의 크기가 페이지의 일부 지점으로 변경되지만 중지됩니다.

나는 테이블이 왜 그렇게 행동하는지 알지 못합니다. 페이지의 나머지 부분과 마찬가지로 계약을 체결하고 싶습니다.

표시되는 검은 선은 "clear : both"로 설정된 div 컨테이너에서 가져온 것입니다.

테이블의 HTML 코드 :

<table class="tborder" cellpadding="6" cellspacing="0" border="1" align="center" id="videoevent"> 
<tbody> 
<tr> 
<td class="thead" align="center" valign="middle" style="vertical-align:center"> 
    Headline 
</td> 

</tr><tr> 

<td class="alt2" align="center" style="padding:10px;"> 

    <div class="right" style="margin:5px 0px 10px 0px"><span id="user_online_count">refreshing...</span> persons are viewing this page</div> 

    <div class="left" style="margin:5px 0px 10px 0px">OVERVIEW</div> 

    <div class="c"></div> 


    <div class="overviewcontainer" style="margin-right:10px;"> 
    <a href="./?room=1"> 
    <img src="/thumbs/test.jpg" class="overview-img" height="200" alt="" border="0" /> 
    <span class="img-headline">Jade</span> 
    <span class="offline_indicator" id="oi_model_1">offline</span> 
    </a> 

    </div><div class="overviewcontainer" style="margin-right:10px;"> 
    <a href="./?room=2"> 
    <img src="/thumbs/test.jpg" class="overview-img" height="200" alt="" border="0" /> 
    <span class="img-headline">User</span> 
    <span class="offline_indicator" id="oi_model_2">offline</span> 
    </a> 

    </div><div class="overviewcontainer" style="margin-right:10px;"> 
    <a href="./?room=3"> 
    <img src="/thumbs/test.jpg" class="overview-img" height="200" alt="" border="0" /> 
    <span class="img-headline">User</span> 
    <span class="offline_indicator" id="oi_model_3">offline</span> 
    </a> 

    </div><div class="overviewcontainer" style="margin-right:10px;"> 
    <a href="./?room=4"> 
    <img src="/thumbs/test.jpg" class="overview-img" height="200" alt="" border="0" /> 
    <span class="img-headline">XXX</span> 
    <span class="offline_indicator" id="oi_model_4">offline</span> 
    </a> 

    </div><div class="overviewcontainer" style="margin-right:10px;"> 
    <a href="./?room=5"> 
    <img src="/thumbs/test.jpg" class="overview-img" height="200" alt="" border="0" /> 
    <span class="img-headline">admin</span> 
    <span class="offline_indicator" id="oi_model_5">offline</span> 
    </a> 

</div> 

<div class="c"></div> 

</td> 
</tr> 
<tr> 
<td colspan="2"> 
Viewers: <span id="users_in_chat">waiting for refresh</span> 

</td> 
</tr> 
</tbody> 
</table> 

나는이 문제를 일으킬 수있는 테이블의 스타일에 아무것도 볼 :

td[align=center] { 
text-align: -webkit-center; 
} 
td[valign=middle] { 
vertical-align: middle; 
} 
element.style { 
} 
.thead { 
background: #CA1B03; 
color: white; 
font: normal normal bold 11px/normal tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; 
} 
td, th, p, li { 
font: normal normal normal 10pt/normal verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; 
} 
/*user agent stylesheet*/ 
td, th { 
display: table-cell; 
vertical-align: inherit; 
} 
Inherited from table#videoevent.tborder 
.tborder { 
color: black; 
} 
/*user agent stylesheet*/ 
table { 
border-spacing: 2px 2px; 
border-collapse: separate; 
} 
/*Inherited from div.dynwrap.page*/ 
Style Attribute { 
text-align: left; 
} 
.page { 
color: black; 
} 
/*Inherited from body*/ 
body { 
color: black; 
font: normal normal normal 10pt/normal verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; 
} 

Answer 1

어쩌면 몇 가지 파라미터 nowrap 요소 또는 요소가 유발 고정 너비 td 요소 안에? 동영상, 이미지 또는 style="white-space: nowrap;"?