Table goes out of container

Vote count:

0

Please take a look at this Fiddle Example .

This is the basic setup of my site. I'm trying to make the table more responsive so that it won't go out of box div. I can't get media queries to change its width so any suggestions to make the table fit within 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;
}

asked 1 min ago

user35295

301