表熄滅容器

這是我的網站的基本設置。我試圖使表更加敏感，這樣就不會在1024x760或低於去box格的了。我不能讓媒體查詢來改變它的寬度，因此任何建議，使內div.box表貼合？

HTML：

<div class="container"> 
    <div class="sidebar"> 
<div class="right"> 
<div class="box"> 
<h3>Headline Topic Subject</h3> 
<table class="toptable"> 
    <tr> 
     <th style="visibility:hidden">-</th> 
     <th class="image">-</th> 
     <th class="image">-</th> 
     <th class="image">-</th> 
     <th class="image">-</th> 
     <th class="image">-</th> 
     <th class="image">-</th> 
     <th class="image">-</th> 
     <th class="image">-</th> 
     <th class="image">-</th> 
     <th class="image">-</th> 
    </tr> 
    <tr> 
     <td class="description">Name</td> 
     <td class="description">Alan Alan</td> 
     <td class="description">John Alan</td> 
     <td class="description">Tom Alan</td> 
     <td class="description">Alan</td> 
     <td class="description">John</td> 
     <td class="description">Peter</td> 
     <td class="description">Alan</td> 
     <td class="description">John</td> 
     <td class="description">Alan Alan</td> 
     <td class="description">John Alan</td> 
    </tr> 
    <tr> 
     <td class="title">Age</td> 
     <td class="title">8</td> 
     <td class="title">9</td> 
     <td class="title">54</td> 
     <td class="title">8</td> 
     <td class="title">9</td> 
     <td class="title">5</td> 
     <td class="title">8</td> 
     <td class="title">9</td> 
     <td class="title">8</td> 
     <td class="title">9</td> 
    </tr> 
     <tr> 
     <td class="title">Age</td> 
     <td class="title">8</td> 
     <td class="title">9</td> 
     <td class="title">54</td> 
     <td class="title">8</td> 
     <td class="title">9</td> 
     <td class="title">5</td> 
     <td class="title">8</td> 
     <td class="title">9</td> 
     <td class="title">8</td> 
     <td class="title">9</td> 
    </tr> 
     <tr> 
     <td class="title">Age</td> 
     <td class="title">8</td> 
     <td class="title">9</td> 
     <td class="title">54</td> 
     <td class="title">8</td> 
     <td class="title">9</td> 
     <td class="title">5</td> 
     <td class="title">8</td> 
     <td class="title">9</td> 
     <td class="title">8</td> 
     <td class="title">9</td> 
    </tr> 
</table> 
</div> 
</div> 
</div> 
</div>

CSS：

.toptable{ 
    border-collapse:separate;width:100%; 
} 
.box {background: #F2F5A9 ; 
padding: 15px; 
} 
.toptable th{ 
    background:#b8cee2; 
} 
.toptable td{ 
font: bold 16px 'Open Sans',Helvetica,sans-serif;} 

.toptable tr td:first-child { 
background:#b8cee2;font-size: 18px;font-weight:normal; 
word-wrap: break-word; 
} 

.toptable th,.toptable td{ 
    text-align:center; 
    padding:20px 0; 
} 

.toptable tbody td:nth-child(even){ 
    background:#E1E2E4; 
} 

@media only screen and (min-width: 760px) and (max-width: 1024px) { 
.toptable {width:350px!important;} } 

.right { 
max-width: 1300px; 
min-width: 600px; 
padding-left: 220px; 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box; 
} 

.sidebar { 
position: absolute; 
left: 20px; 
top: 40px; 
width: 200px; 
    background:#989898; 
} 

.container { 

padding: 0px; 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
}

來源

2014-05-25 RedGiant

減少內容i在桌子上。它的溢出容器的原因是，你的標題是不是可以被包含在容器div.box的寬度。 –

表從內容膨脹，以固定其寬度用表格的佈局，內容將從細胞溢出從而http://jsfiddle.net/a8ZFQ/7/ –

爲了擴大對我的評論，看看當我添加

word-break: break-all

您.DESCRIPTION標題會發生什麼：http://jsfiddle.net/6v6R5/

來源

2014-05-25 19:05:40

回答

相關問題