如何向HTML5表格添加滚动条？ [英] How to add a scrollbar to an HTML5 table?

问题描述

我有一个HTML5表格，我想添加一个滚动条。我想要表格显示十行，然后用户可以向下滚动看到其他歌曲。

 
 < table id =my_tabletable border =5> 
< tr> 
< th> URL< / th> 
< / tr> 
< tr> 
< td> http：//www.youtube.com/embed/evuSpI2Genw< / td> 
< / tr> 
< tr> 
< td> http：//www.youtube.com/embed/evuSpI2Genw< / td> 
< / tr> 
< / table> 
  

这是我的CSS代码：

  #my_table {
 border-radius：20px; 
 background-color：transparent; 
 color：black; 
 width：500px; 
 text-align：center; 
} 
  

解决方案

表列，而您不想滚动这些标题，则此解决方案可能会帮助您：

此解决方案需要 thead

$ tbody 标签。

  table.tableSection {
 display：table; 
 width：100％; 
} 
 table.tableSection thead，table.tableSection tbody {
 float：left; 
 width：100％; 
} 
 table.tableSection tbody {
 overflow：auto; 
 height：150px; 
} 
 table.tableSection tr {
 width：100％; 
 display：table; 
 text-align：left; 
} 
 table.tableSection th，table.tableSection td {
 width：33％; 
} 
  

工作小提琴

有评论

注意：如果您确定垂直滚动条总是存在，那么你可以使用css3 calc属性使得thead单元与tbody单元格一致。

  table.tableSection thead { 
 padding-right：18px; / * 18px is approx。滚动条的宽度值* / 
 width：calc（100％ -  18px）; 
} 
  

您也可以通过使用javascript检测滚动条的存在并应用上述

I have an table in HTML5 that I would like to add a scrollbar to. I want the table to show ten rows and then the user can scroll down to see other songs. How can I add the scrollbar?

Here is my code for the table in HTML5:

<table id="my_table" table border="5">
  <tr>
    <th>URL</th>
  </tr>
  <tr>
    <td>http://www.youtube.com/embed/evuSpI2Genw</td>
  </tr>
  <tr>
    <td>http://www.youtube.com/embed/evuSpI2Genw</td>
  </tr>
</table>

Here is my CSS code:

#my_table {
    border-radius: 20px;
    background-color: transparent;
    color: black;
    width: 500px;
    text-align: center;
}

解决方案

If you have heading to your table columns and you don't want to scroll those headings then this solution could help you:

This solution needs thead and tbody tags inside table element.

table.tableSection {
    display: table;
    width: 100%;
}
table.tableSection thead, table.tableSection tbody {
    float: left;
    width: 100%;
}
table.tableSection tbody {
    overflow: auto;
    height: 150px;
}
table.tableSection tr {
    width: 100%;
    display: table;
    text-align: left;
}
table.tableSection th, table.tableSection td {
    width: 33%;
}

Working fiddle

With comments

Note: If you are sure that the vertical scrollbar is always present, then you can use css3 calc property to make the thead cells align with the tbody cells.

table.tableSection thead {
    padding-right:18px;   /* 18px is approx. value of width of scroll bar */
    width: calc(100% - 18px);
}

You can do the same by detecting presence of scrollbar using javascript and applying the above styles.

这篇关于如何向HTML5表格添加滚动条？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！