How to use CSS to add a vertical scroll bar to tbody
This article mainly introduces how to use CSS to add a vertical scroll bar to tbody, which has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.
The idea is
1, set tbody to display:block, then set a fixed value to its height, and set overflow to auto.
2. Set the tr of thead to display:block.
3. Add width width:200px to td manually because they are all set to block
The code is as follows:
Id
Name
Category
MonthAmount
HasBackUp
Score
twenty-three
South Bearing
Glass/Material
1234444
TRUE
3456.00
twenty-three
South Bearing
Glass/Material
1234444
TRUE
3456.00
twenty-three
South Bearing
Glass/Material
1234444
TRUE
3456.00
twenty-three
South Bearing
Glass/Material
1234444
TRUE
3456.00
twenty-three
South Bearing
Glass/Material
1234444
TRUE
3456.00
twenty-three
South Bearing
Glass/Material
1234444
TRUE
3456.00
twenty-three
South Bearing
Glass/Material
1234444
TRUE
3456.00
twenty-three
South Bearing
Glass/Material
1234444
TRUE
3456.00
twenty-three
South Bearing
Glass/Material
1234444
TRUE
3456.00
twenty-three
South Bearing
Glass/Material
1234444
TRUE
3456.00
twenty-three
South Bearing
Glass/Material
1234444
TRUE
3456.00
Css
The code is as follows:
. Table thead tr {
Display:block
}
. Table tbody {
Display: block
Height: 200px
Overflow: auto
}
. Table th {
Width:20%
}
. Table td {
Width:20%
}
Thank you for reading this article carefully. I hope the article "how to use CSS to add a vertical scroll bar to tbody" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and follow the industry information channel. More related knowledge is waiting for you to learn!
