rộng tbody không tự động kéo dài đến chiều rộng của bảng

Question

Hãy xem ví dụ này ở đây:

http://denise.brixwork.com/showlisting/1/8297-Valley-Drive-Alpine-Meadows-Whistler-denise-brown-real-estate

Và các bảng màu đỏ dưới "Thông số kỹ thuật" không trở thành toàn bộ chiều rộng của chứa nó - khi kiểm tra trên Firebug, div không phải là 220 pixel, mà đúng hơn, chỉ hơn 100 pixel dựa trên chiều rộng nội dung.

<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> 

mã CSS trông như thế này:

#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%; 
} 

Tôi biết có một CSS Resetter chung chung, và tôi nghĩ đó là những gì đang gây ra vấn đề. Thật không may tôi không thể đi và chỉ cần loại bỏ các tham chiếu đến nó bởi vì nhiều trang web đề cập đến nó từ cùng một vị trí tại thời điểm này, và tôi không thể chỉ thực hiện thay đổi mà không cần xem xét cẩn thận. Vì vậy, tôi cần một cách để ghi đè lên nó trên bản định kiểu. CSS đặt lại được gọi là:

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

Answer 1

bạn chỉ nên thêm

display: table; 

dưới selector này:

#listing_specs table { } 

Answer 2

Bảng kế thừa hiển thị: nội tuyến;

Nó phải là: display: table;

Phần cousing màn hình: inline là:

.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; 
}