Question

请看一下 Fiddle Example 。

这是我网站的基本设置。我试图让表格更具响应性，以便它不会在1024x760或更低的频率下离开box div。我无法通过媒体查询来更改其宽度，因此有任何建议可以使表格适合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;
}

Answer 1

要扩展我的评论，请查看添加

时会发生什么

word-break: break-all

到你的.description标题：http://jsfiddle.net/6v6R5/

表走出容器

1 个答案: