Html 桌子从容器中取出

请看一下这个

这是我的网站的基本设置。我正在努力使表格更具响应性，这样它就不会在1024x760或更低的位置跳出

框

div。我无法让媒体查询更改其宽度，以便有任何建议使表格适合

div.box

HTML:

---

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

word-break: break-all 

---

到您的.description标题：

减少表中的内容。它溢出容器的原因是您的标题比容器div.box的宽度要宽。表从内容展开，要固定其宽度，请使用表布局，内容将从单元格溢出

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

word-break: break-all