Home >Web Front-end >HTML Tutorial >Table tbody adds horizontal scroll bar_html/css_WEB-ITnose
Table tbody adds horizontal scroll bar_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:38:421832browse
I want to add a horizontal scroll bar to the table body
But after adding it, the resulting grid lines become messy.
Normally this kind of grid adds a horizontal scroll bar under its tbody
Code———————————————————————————— ---------------------------------
CSS:
html:-------------------------------------------------- -------------------------------------------------- -----------------------------------------------
Specification model < /th> < th scope="col" style="width: 80px;">Category | " style="width: 80px;">Available timeBarcode prefix | Round up the quantity | " style="width: 80px;">Gross weightJYZ-V5 | JYZ-V5043 | 0.919 | 0.867 | |||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| JYZ-V5043 | Joyoung/九阳 JYZ-V5原汁机慢速榨汁机家用低速多功能电动果汁机 | JYZ-V5 | JYZ | 九阳 | 果汁机 | 2014-09-08 | 0908 | 4 | 0.989 | 0.919 | 0.867 |
| JYZ-V5043 | Joyoung/九阳 JYZ-V5原汁机慢速榨汁机家用低速多功能电动果汁机 | JYZ-V5 | JYZ | 九阳 | 果汁机 | 2014-09-08 | 0908 | 4 | 0.989 | 0.919 | 0.867 |
Reply to discussion (solution)
.newtable tr {
/*display:table-row;*/
display: inline-flex;
border-left: 1px solid #999;
border-top: 1px solid #999;*/
}
Remove the comment end tag of the second line
body {
font-size: 12px;
text-align: center;
}
/*newtable*/
.newtable {
/* border-top: 1px solid #999;
border-right: 1px solid #999;
border-spacing: 0;*/
}
.newtable
{
background-color:black;
}
.newtable thead {
border-right: 1px solid #999;
}
.newtable tbody {
display: block;
/*border-right: 1px solid #999;*/
}
.newtable th {
padding-top: 8px;
padding-bottom: 8px;
background-color:white;
/*border: 1px solid #999;*/
/*border-collapse: separate;*/
/*border-right: 1px solid #999;
border-left: 1px solid #999;
border-bottom: 1px solid #999;*/
}
.newtable td {
background-color: white;
padding-top: 8px;
padding-bottom: 8px;
/*border-right: 1px solid #999;
border-left: 1px solid #999;
border-bottom: 1px solid #999;*/
}
JYZ
九阳
果汁机
2014-09-08
0908
4
0.989
0.919
0.867
JYZ-V5043
Joyoung/九阳 JYZ-V5原汁机慢速榨汁机家用低速多功能电动果汁机
JYZ-V5
JYZ
九阳
果汁机
2014-09-08
0908
4
0.989
0.919
0.867
.newtable tr {
/*display:table-row;*/
display: inline-flex;
border-left: 1px solid #999;
border-top: 1px solid #999;*/
}
Remove the comment end tag of the second line
That means you don’t need the entire line? Then there are no scroll bars.
.newtable tr {
/*display:table-row;*/
display: inline-flex;
border-left: 1px solid #999;
border-top: 1px solid #999;*/
}
Remove the comment end tag of the second line
That means you don’t need the entire line? Then there are no scroll bars.
border-left: 1px solid #999;
border-top: 1px solid #999;*/
Remove these 2 lines
Aunt A is awake and awake