테이블을 html로 브라우저 크기에 맞추는 방법은 무엇입니까?

<html> 
    <body> 
    <h1>header</h1> 
    <header style='border-bottom:solid black; height:64px'> 
     <h1 style = 'text-align: left; display:inline-block'> 
     $CName($CSymbol)</h1> 
     <span style='padding-left:7px'>$firstN $secondN($thirdN%)</span> 
    </header> 

<table width='1340px'> 
<tr> 
    <td>Prev Close:</td> 
    <td align='right' style='padding-right:30px;'>$prevClose</td> 
    <td>Day's Range:</td> 
    <td align='right'>$daysRange</td> 
<tr> 
    <td>Open:</td> 
    <td align='right' style='padding-right:30px;'>$open</td> 
    <td>52wkRange:</td> 
    <td align='right'>$yearsRange</td> 
</tr> 
<tr> 
    <td>Bid:</td> 
    <td align='right' style='padding-right:30px;'>$bid</td> 
    <td>Volume:</td> 
    <td align='right'>$volume</td> 
</tr> 
<tr> 
    <td>Ask:</td> 
    <td align='right' style='padding-right:30px;'>$ask</td> 
    <td>Avg Vol(3m):</td> 
    <td align='right'>$avgVol</td> 
</tr> 

<tr> 
    <td>1y Target Est:</td> 
    <td align='right' style='padding-right:30px;'>$targetEst</td> 
    <td>Market Cap:</td> 
    <td align='right'>$marketCap</td> 
</tr> 
</table> 

</body> 
</html>

코드가 FF에서는 잘 작동하지만 브라우저 크기를 조정해도 "머리글"은 여전히 중앙에 있지만 테이블과 아래쪽 테두리가보기를 초과합니다. 브라우저 크기를 조정하면 콘텐츠가 여전히 적합합니다. 감사합니다 after resize 테이블을 html로 브라우저 크기에 맞추는 방법은 무엇입니까?

출처

2014-03-04 user2810081

befor resize

귀하의 <table> 고정 폭을 갖는다. % 값 (예 : 100 %)으로 변경하면 브라우저의 너비에 맞는지 확인할 수 있습니다. http://jsfiddle.net/9paab/

출처

2014-03-04 03:22:37 Marcatectura

테두리가 테이블과 함께 있습니까? 국경의 너비를 바꾸지는 않았지만 여전히 맞습니다. 왜 그런가요? – user2810081

테두리는 스타일이 아니며 요소가 아니며 DOM에 개체로 존재하지 않습니다. 테두리는 적용될 요소 ('header')로부터 너비를 가져옵니다. – Marcatectura

맞지만 헤더 요소의 너비를 지정하지 않았습니까? – user2810081

당신이 최대 및 최소 폭

<table style="max-width:1340px; min-width:800px'>

를 사용하거나

<table style='width:100%'>을 설정해야

출처

2014-03-04 03:25:17

100 % 그것을 확인해야합니다 : 여기

는 jsfiddle 당신이 원하는에 가까운 것

with 이 테이블은 컨테이너의 너비에 맞습니다.

출처

2014-03-04 05:02:26 Kamlesh

테이블을 html로 브라우저 크기에 맞추는 방법은 무엇입니까?

답변

관련 문제