如何创建宽度为100%的表格，并在HTML表格主体内部垂直滚动（）

本文的方法是使用width属性创建宽度为100％的表, 并使用overflow-y属性创建表体内的垂直滚动。 Overflow属性用于在表中创建滚动条。使用显示：块；属性以显示块级元素。由于更改了tbody的显示属性, 因此我们也应该更改thead元素的属性, 以防止破坏表格布局。
例子：

< !DOCTYPE html> < html> < head> < title> Display table with vertical scrollbar < /title> < style> table.scrolldown { width: 100%; /* border-collapse: collapse; */ border-spacing: 0; border: 2px solid black; }/* To display the block as level element */ table.scrolldown tbody, table.scrolldown thead { display: block; } thead tr th { height: 40px; line-height: 40px; }table.scrolldown tbody {/* Set the height of table body */ height: 50px; /* Set vertical scroll */ overflow-y: auto; /* Hide the horizontal scroll */ overflow-x: hidden; }tbody { border-top: 2px solid black; }tbody td, thead th { width : 200px; border-right: 2px solid black; } td { text-align:center; } < /style> < /head> < body> < table class = "scrolldown"> < !-- Table head content --> < thead> < tr> < th> Heading 1< /th> < th> Heading 2< /th> < th> Heading 3< /th> < th> Heading 4< /th> < th> Heading 5< /th> < /tr> < /thead> < !-- Table body content --> < tbody> < tr> < td> Content< /td> < td> Content< /td> < td> Content< /td> < td> Content< /td> < td> Content< /td> < /tr> < tr> < td> Content< /td> < td> Content< /td> < td> Content< /td> < td> Content< /td> < td> Content< /td> < /tr> < tr> < td> Content< /td> < td> Content< /td> < td> Content< /td> < td> Content< /td> < td> Content< /td> < /tr> < /tbody> < /table> < body> < /html>

【如何创建宽度为100%的表格，并在HTML表格主体内部垂直滚动（）】输出如下：