Question

我正在做一个网站只是为了学习其他模板的css，我正在做一个有8个属性的表。

我需要一些指导，如何将桌子放在盒子里面，不要让它离开边框。我试图把溢出，但我认为我做错了。该模板来自互联网。

我想我只需要在tablesorter中做点什么，但我不确定是什么。

#este .tablesorter {
  width: inherit;
  margin: -5px 0 0 0;
}

#este .tablesorter td{
  margin: 0;
  padding: 0;
  border-bottom: 1px dotted #ccc;
}

#este .tablesorter thead tr {
  height: 34px;
  background: url(../images/table_sorter_header.png) repeat-x;
  text-align: left;
  text-indent: 10px;
  cursor: pointer;
}

#este .tablesorter input[type=image] {
  margin-right: 10px;
}

#este table.tablesorter thead tr .headerSortDown, 
#este table.tablesorter thead tr .headerSortUp {
  background-color: #8dbdd8;
}

代码在这里：https://jsfiddle.net/3gnhfLLt/

Answer 1

将overflow-x: auto放到module_content课程中，然后你就去了！

.module_content {
    margin: 10px 20px;
    color: #666;
    overflow-x: auto;
}

Answer 2

在你的CSS中添加它，肯定会有效

.module_content{
  overflow-x:auto;
  width:auto;
}

JSfiddle

Answer 3

您的表格标题<th>只是很长。您有3个选择：

在x方向使用滚动：

.module_content {
    overflow-x: auto;
}

对包含break-word的表格单元格使用max-width：

th {
    max-width: 30px;
    word-wrap: break-word;
}

使表格标题单元格内容更小

Answer 4

试试这个

#este .tablesorter {table-layout:fixed; width:100%;}

#este .tablesorter td, #este .tablesorter th{ word-wrap: break-word;}

Demo

如何把桌子放在盒子里面

4 个答案: