问题出现的原因是希望在一个占满整个宽度的HTML表格中，对tbody部分进行垂直滚动。解决方法是使用纯CSS实现，通过将th元素的position设置为sticky并设置top为0来实现表头固定。此外，还可以添加一些样式来修复在滚动时默认边框无法正确绘制的问题。

具体的解决方案如下：

1. 首先，在css中添加以下样式：

/* 修复表头 */
.tableFixHead    { overflow: auto; height: 100px; }
.tableFixHead th { position: sticky; top: 0; }
/* 常见的表格样式 */
table  { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th     { background:#eee; }

2. 然后，在html中添加以下代码：

  

    

      
TH 1
TH 2
    
    

      
A1
A2
      
B1
B2
      
C1
C2
      
D1
D2
      
E1
E2
    
  

3. 如果需要对th元素添加边框，可以使用以下代码来修复边框在滚动时无法正确绘制的问题：

th {box-shadow: 1px 1px 0 #000; border-top: 0;}

4. 如果还需要兼容IE11，可以参考这个答案中使用少量JS的解决方案。

5. 注意，如果对th元素添加了边框，并且使用了"border-collapse: collapse"样式，边框将会附着在tbody而不是表头上。为了避免这个问题，应该使用"border-collapse: separate"样式。具体可以参考这个回答。

以上就是关于在HTML表格中实现百分之百宽度，并在tbody部分内部进行垂直滚动的问题的原因和解决方法的整理。通过使用CSS的position: sticky属性和一些样式的调整，可以轻松实现这个效果。

在这个问题中，我们想要实现一个具有100%宽度的HTML表格，并且在tbody中有垂直滚动条。为了实现tbody的滚动功能，我们需要改变它在页面中的显示方式，即使用"display: block;"将其显示为块级元素。由于我们改变了tbody的display属性，我们也应该为thead元素改变该属性，以防止破坏表格布局。因此，我们有以下CSS代码：

thead, tbody { display: block; }
tbody {
    height: 100px;       /* Just for the demo          */
    overflow-y: auto;    /* Trigger vertical scroll    */
    overflow-x: hidden;  /* Hide the horizontal scroll */
}

Web浏览器默认将thead和tbody元素显示为行组（table-header-group和table-row-group）。一旦我们改变了这个设置，里面的tr元素就不会填满其容器的整个空间。为了解决这个问题，我们需要计算tbody列的宽度，并通过JavaScript将相应的值应用于thead列。

以下是上述逻辑的jQuery版本：

// Change the selector if needed
var $table = $('table'),
    $bodyCells = $table.find('tbody tr:first').children(),
    colWidth;
// Get the tbody columns width array
colWidth = $bodyCells.map(function() {
    return $(this).width();
}).get();
// Set the width of thead columns
$table.find('thead tr').children().each(function(i, v) {
    $(v).width(colWidth[i]);
});

解决方法中的输出结果如下（在Windows 7 Chrome 32中）：

[](http://jsfiddle.net/hashem/CrSpu/555/)

如果你想要一个具有100%宽度的表格，并且每列的宽度是相对的（以百分比表示），可以使用以下CSS代码：

table {
    width: 100%; /* Optional */
}
tbody td, thead th {
    width: 20%;  /* Optional */
}

由于表格具有流式布局，我们应该在容器调整大小时调整thead列的宽度。因此，我们应该在窗口调整大小时设置列的宽度：

// Adjust the width of thead cells when *window* resizes
$(window).resize(function() {
    /* Same as before */
}).resize(); // Trigger the resize handler once the script runs

输出结果如下：

[](http://jsfiddle.net/hashem/CrSpu/554/)

上述方法在Windows 7上的主要Web浏览器的新版本中进行了测试，并且可以正常工作。但是，在IE9及以下版本上可能无法正常工作。这是因为在表格布局中，所有元素都应遵循相同的结构属性。通过为thead和tbody元素使用"display: block;"，我们破坏了表格结构。

解决方法之一是重新设计整个表格布局。使用JavaScript动态创建新布局，并动态处理和/或调整单元格的宽度/高度。例如，可以使用以下插件或示例来实现这种方法：

- jQuery .floatThead()插件（一个浮动/锁定/粘性表头插件）

- jQuery Scrollable Table插件

- jQuery .FixedHeaderTable()插件

- DataTables垂直滚动示例

另一种方法是使用嵌套表格。这种方法使用两个嵌套的表格和一个包含的div元素。第一个表格只有一个单元格，其中包含一个div元素，第二个表格放置在该div元素内。这种方法适用于大多数Web浏览器，也可以通过JavaScript动态执行上述逻辑。

还有一种方法是将thead元素的位置固定在屏幕顶部，而不是在tbody中添加垂直滚动条。这种方法的一个示例可以在这里找到。

上述方法中的纯CSS解决方案如下：

对于具有固定宽度的表格，可以使用以下CSS代码：

table {
    width: 716px; /* 140px * 5 column + 16px scrollbar width */
    border-spacing: 0;
}
tbody, thead tr { display: block; }
tbody {
    height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
}
tbody td, thead th {
    width: 140px;
}
thead th:last-child {
    width: 156px; /* 140px + 16px scrollbar width */
}

输出结果如下：

[](http://jsfiddle.net/hashem/CrSpu/557/)

对于具有100%宽度的表格，可以使用以下CSS代码：

table {
    width: 100%;
    border-spacing: 0;
}
thead, tbody, tr, th, td { display: block; }
thead tr {
    /* fallback */
    width: 97%;
    /* minus scroll bar width */
    width: -webkit-calc(100% - 16px);
    width:    -moz-calc(100% - 16px);
    width:         calc(100% - 16px);
}
tr:after {  /* clearing float */
    content: ' ';
    display: block;
    visibility: hidden;
    clear: both;
}
tbody {
    height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
}
tbody td, thead th {
    width: 19%;  /* 19% is less than (100% / 5 cols) = 20% */
    float: left;
}

这种方法的在线演示可以在这里找到。

需要注意的是，如果每列的内容会换行，这种方法将无法正常工作。每个单元格的内容应足够短。

在文章的后面，还提供了其他一些纯CSS解决方案和一些实例链接，以及一个关于使用JavaScript重新设计布局的方法。

总结起来，解决这个问题的原因是通过改变tbody和thead元素的display属性，我们破坏了表格的结构和布局。解决方法是通过改变CSS样式或使用JavaScript重新设计布局，以实现所需的效果。

HTML表格宽度为100%，tbody内部有垂直滚动条的原因是，使用了纯CSS的flex布局。下面是解决方法：

可能的缺点：

1. 无论是否需要，垂直滚动条始终可见；

2. 表格布局是固定的，列不会根据内容宽度自动调整大小（仍然可以显式设置列宽度）；

3. 存在一个绝对尺寸，即滚动条的宽度，根据我所测试的浏览器，大约为0.9em。

HTML代码简写：

    
            ...
        

        

            

                
head1
                
head2
                
head3
                
head4
            
        
        

            

                
content1
                
content2
                
content3
                
content4
            
            

                
content1
                
content2
                
content3
                
content4
            
    

CSS代码（为了清晰起见，省略了一些装饰）：

.table-container {
    height: 10em;
}
table {
    display: flex;
    flex-flow: column;
    height: 100%;
    width: 100%;
}
table thead {
    flex: 0 0 auto;
    width: calc(100% - 0.9em);
}
table tbody {
    flex: 1 1 auto;
    display: block;
    overflow-y: scroll;
}
table tbody tr {
    width: 100%;
}
table thead, table tbody tr {
    display: table;
    table-layout: fixed;
}

LESS代码（可以混合进去）：

.table-scrollable() {
  -width: 0.9em;
  display: flex;
  flex-flow: column;
  thead,
  tbody tr {
    display: table;
    table-layout: fixed;
  }
  thead {
    flex: 0 0 auto;
    width: ~"calc(100% - @{scrollbar-width})";
  }
  tbody {
    display: block;
    flex: 1 1 auto;
    overflow-y: scroll;
    tr {
      width: 100%;
    }
  }
}

感谢这个解决方案！有一个小问题...你为thead设置了两次宽度，我发现从宽度中减去1.05em效果更好：

[jsfiddle.net/xuvsncr2/170](https://jsfiddle.net/xuvsncr2/170)

对于内容字符数量的问题，当在行单元格中添加更多字符或单词时会出现混乱。我认为在td上设置适当的换行策略应该会有所帮助。

如果不想让表格占据父容器的100%宽度，可以尝试在表格和父容器之间添加另一个容器，并将其宽度设置为所需的宽度。

喜欢这个解决方案，谢谢！我不希望表格占据100%的高度（因为表格边框样式），这样它会根据所需高度高度，并在填充其容器后开始滚动：

.table-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

如何防止窗口调整大小时表格变形和重叠？

由于不同浏览器的滚动条宽度不同，我使用了隐藏的::after伪元素，在头部行的末尾呈现一个带有打开滚动条的间隔器。为了使其正常工作，我还使用了flexbox，确保td/th单元格扩展以填充其余行（表格布局引擎无法实现此功能）。

thead tr::after {
    visibility: hidden;
    overflow-y: scroll;
    content: '';
}
tr {
    display: flex;
}
th, td {
    flex: 1 0 0;
}

一次尝试即可解决问题，但如果你使用自定义滚动条，可能需要调整尺寸：

tbody {
    width: 99%;
}