2011-05-06 8 views
0

나는 여기서 무언가를 놓치고있는 것처럼 보이지만 다음 테이블의 셀 을 전체 테이블에 걸쳐 놓을 수는 없다. 첨부 jsfiddle 링크를 참조하십시오 :HTML 표 너비.

http://jsfiddle.net/jeremysolarz/5stQc/2/

나는 테이블 디자인이 좋은 아니라는 것을 알고 있지만 GIF 스페이서 이미지의 많은 여기에 기존 응용 프로그램과 함께 일하고 있어요 나는 이것과 스위치를 제거 할 더 많은 CSS 중심 배치.

도와주세요.

답변

3

이 경우 중첩 테이블이 있어야합니까? 당신이 방금 하나의 테이블을 가지고 있었고 <th colspan="3">을 사용했다면이 문제를 해결할 수 있을까요? 미안하지만 이것이 사실이 아니라면 당신이 그것을 지나치게 복잡하게 만드는 것처럼 보입니다!

+0

+1 중첩 된 테이블이 경우에는 필요하지 않습니다이 - 단순화 할 수있다. – Austin

+0

내부 테이블이 없어도 제공된 js 바이올린 링크에서 시험해 볼 수 있습니다. –

+3

다음을 시도하십시오. http://jsfiddle.net/5stQc/20/ - 문제는 테이블의 고정 너비라고 생각합니다. CSS에서 끝 부분에 차이가 발생합니다. ** 편집 ** - 디스플레이 삭제 : CSS의 블록이 트릭을 수행합니다. 그리고 불필요한 비트의 몇 가지 다른 비트 : http://jsfiddle.net/5stQc/28/ – Arj

1

현재 테이블의 너비를 HTML로 선언하고 CSS에서 선언하고 두 값이 다른 경우 다음과 같이 div에 테이블을 래핑하고 인라인 너비 선언을 제거해야합니다.

은 * 프레임 */

#foo{ 
    width:100%; 
    display: inline-block; 
} 
.newframeContainer { 
    padding:0; 
    margin:0 auto; 
    text-align: left; 
    width:70%; 
    height: auto; 
    border:none; 
    -moz-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); 
    -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); 
     border: 1px solid #B6B6B6; 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    border-radius: 3px; 
} 

html로 지금과 같이한다/:

<div id="foo"> 
<table height="100%" class="newframeContainer" cellspacing="1"> 
    <tbody> 
     <tr height="27"> 
      <th colspan="3"> 
       ADAM Statistics 
      </th>    
     </tr> 
     <tr height="99%"> 
      <td class="text-bold">Total Project Budgets [USD] </td> 
      <td>test</td> 
      <td valign="top" align="right"> 
       192,609,012 
      </td> 
     </tr> 
    <tbody> 
</table> 

</div>