2012-07-03 2 views
30

이 여기 예를 살펴 테이블의 폭을 확장하지 Firebug에서 div는 220 픽셀이 아니고 콘텐츠 너비에 따라 100 픽셀을 약간 넘습니다.TBODY 폭은 자동으로

<div class="grid_4 alpha"> 
    <table width="100%" class="grid_4 alpha omega"> 
      <tr class="specrow"> 
      <td class="specname">type:</td> 
      <td class="specvalue">House</td> 
     </tr> 
     <tr class="specrow"> 
      <td class="specname">year:</td> 
      <td class="specvalue">1986</td> 
     </tr> 
    </table> 
</div> 

CSS 코드는 다음과 같습니다

#listing_specs table { 
    width: 100%; 
} 

#listing_specs table tbody { 
    display: table-row-group; 
    width: 100%; 
} 

.specrow { 
    margin:2px 0px; 
    border-bottom:1px dotted #dadada; 
    color: #fff; 
    width: 100%; 
    background-color: #A92229; 
} 

.specrow:hover { 
    background-color:#fff; 
    color:#333; 
} 

.specname{ 
    font-weight: 600; 
    padding:2px 2px 2px 5px; 
    width: 50%; 
    white-space: nowrap; 
} 

.specvalue { 
    font-weight:normal; 
    padding:2px 5px 2px 5px; 
    text-align:left; 
    width: 50%; 
} 

나는 일반적인 CSS 재설이 알고, 내가 그 문제를 일으키는 무슨 생각합니다. 불행히도 나는 여러 사이트가이 시점에서 같은 위치에서 참조하기 때문에 이동할 수없고 참조를 제거 할 수 없으며 신중한 검토없이 변경 만 할 수는 없습니다. 그래서 스타일 시트 자체에서 그것을 덮어 쓸 방법이 필요합니다. 재설정 된 CSS가 호출됩니다 :

<link rel="stylesheet" type="text/css" media="all" href="http://demo.brixwork.com/master/css/reset.css" /> 

답변

75

:

#listing_specs table { } 
+1

와우. 그렇게 간단하고 효과적입니다. 감사! – jeffkee

+0

은 많은 시간을 절약 했으므로 분당 투표에 로그인하는 데 시간을 보냈습니다. – MAK

+0

옙 나는 디스플레이로 그것을 망칠 수있다 : 인라인 블록 - 그러나 나는 display : inline-table을 대신 사용할 수 있었다. – Fanky

9

테이블은 display : inline;

다음과 같아야합니다. display : table; 디스플레이를 cousing

부분 : 인라인은 : 당신은 그냥이 선택에 따라

display: table; 

를 추가해야

.grid_1, .grid_2, .grid_3, .grid_4, 
.grid_5, .grid_6, .grid_7, .grid_8, 
.grid_9, .grid_10, .grid_11, .grid_12, 
.grid_13, .grid_14, .grid_15, .grid_16 { 
    display: inline; 
    float: left; 
    position: relative; 
    margin-left: 10px; 
    margin-right: 10px; 
} 
+0

아 내가이 충돌을 참조하십시오. 감사! – jeffkee