网页表格或div层在网页中被撑开解决之道

网页中的表格或DIV层在内容较多时可能出现被撑开的情况，导致页面布局混乱，影响用户体验。下面是解决这种情况的完整攻略。

方法一：使用CSS属性overflow

CSS属性overflow可以用来控制元素溢出的部分如何显示，可以将其设置为auto或scroll，来自动或手动添加滚动条。

示例一：

table {
  width: 100%;
  overflow-x: auto;
}

该例中，table元素的宽度为100%，使用overflow-x属性在横向溢出时添加自动滚动条。

示例二：

.wrapper {
  width: 100%;
  overflow: hidden;
}

.wrapper table {
  width: 120%;
}

该例中，wrapper元素的宽度为100%，并使用overflow属性将其溢出部分隐藏，然后将内部的table元素宽度设置为120%来自动触发滚动条。

方法二：使用CSS属性display和float

CSS属性display可以用来控制元素的显示方式，有多个取值可以使用，其中包括table、table-row和table-cell。使用这种取值可以将元素视为表格，使用表格布局。

CSS属性float可以用来控制元素的浮动方式，将元素从正常文档流中“浮起来”，避免元素相互排挤产生的布局混乱。

示例三：

.table-wrapper {
  display: block;
  overflow-x: auto;
}

.table-header,
.table-body {
  display: table;
  width: 100%;
}

.table-header {
  margin-right: 17px;
}

.table-header th {
  padding: 5px;
  text-align: left;
  background-color: beige;
}

.table-body td {
  padding: 5px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.table-header th:last-child {
  width: 50px;
}

.table-body td:last-child {
  text-align: center;
}

该例中，table-wrapper元素的overflow-x属性设置为auto，显示滚动条，然后将内部的table-header和table-body元素使用display属性设置为table，从而将这两个元素视为表格。使用margin-right属性将table-header元素右侧留出17px的空间，避免每行出现滚动条，使用padding属性控制表格单元格的内边距，并设置背景色和边框样式，使表格更加美观。

以上两个方法都可以解决表格或DIV层被撑开的问题，具体使用建议根据页面布局和设计进行选择，以达到最好的显示效果。