如何将 table 放入框内

Question

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

我需要一些指导，了解如何将 table 放入框内而不超出边界。我试着放溢出，但我认为我做错了。模板来自网络。

我想我只需要在 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 class 即可！

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

Answer 2

将此添加到您的 css 中，肯定会起作用

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

JSfiddle

Answer 3

您的 table header 和 <th> 太长了。您有 3 个选项：

使用 x 方向滚动：

.module_content {
    overflow-x: auto;
}

在 table 个单元格上使用 max-width break-word:

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

缩小tableheader单元格内容

Answer 4

试试这个

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

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

Demo

如何将 table 放入框内

How to put the table inside the box

html

css

css-tables