Javascript 不使用JQuery而具有粘性标题和可调整大小的列的表_Javascript_Html_Css

Javascript 不使用JQuery而具有粘性标题和可调整大小的列的表

javascript html css

Javascript 不使用JQuery而具有粘性标题和可调整大小的列的表,javascript,html,css,Javascript,Html,Css,我见过的所有创建具有粘性标题和可调整大小的列的表的解决方案似乎都使用Jquery。我想要一个简单的解决方案，只有在可能的情况下才使用CSS。如果不可能只使用CSS，那么我可以使用CSS+Javascript，但不使用JQuery。Internet Explorer支持在这一点上是一个白日梦我已经为粘性标题找到了单独的解决方案，为可调整大小的列找到了单独的解决方案，但没有为两者找到完整的解决方案。有人能帮忙吗？我的尝试表tbody中唯一缺少的是display:block，滚动条无法正常工作，但

我见过的所有创建具有粘性标题和可调整大小的列的表的解决方案似乎都使用Jquery。我想要一个简单的解决方案，只有在可能的情况下才使用CSS。如果不可能只使用CSS，那么我可以使用CSS+Javascript，但不使用JQuery。Internet Explorer支持在这一点上是一个白日梦

我已经为粘性标题找到了单独的解决方案，为可调整大小的列找到了单独的解决方案，但没有为两者找到完整的解决方案。有人能帮忙吗？我的尝试表tbody中唯一缺少的是

display:block

，滚动条无法正常工作，但这会把其他一切都搞糟。我的尝试：

表{
显示：块；
背景色：青色；
高度：300px！重要；
}
th，td{
最小宽度：25px；
调整大小：水平；
溢出：自动；
} 
tbody{
高度：30px！重要；
背景颜色：绿色；
宽度：100%；
字体大小：1.45vmin；
溢出y：滚动；
}


校长1校长2校长3校长4校长5
12345
11111
11111
11111
11111
11111
11111
11111
11111
11111
11111
11111
11111
11111
11111
11111
11111
11111
11111
11111
11111
11111
11111
11111
11111
11111
11111
11111
11111
11111
11111
11111
11111
11111
11111

下面是一个使用CSS属性的解决方案

可调整大小的表格标题将在右下角显示一个小图标，您可以抓取该图标并调整其大小。（由于Chrome中的一个bug，它可能是……所以请仔细观察。）


.固定标题{
边界塌陷：塌陷；
宽度：100%；
}
.固定标题td，
.已修复标题和{
填充物：5px；
文本对齐：左对齐；
}
.fixed_headers thead，textarea{
背景色：#333；
颜色：#FDFDFD；
}
.fixed_headers thead tr{
位置：相对位置；
}
.fixed_头体tr:n个子体（偶数）{
背景色：#DDD；
}
.已修复标题和{
位置：粘性；
顶部：0；/*必需：https://stackoverflow.com/a/43707215 */
背景色：#333；
z指数：10；
调整大小：水平；
溢出：自动；
最小宽度：70px；
}
收割台1收割台2收割台3收割台4收割台5
12345
11111
11111
11111
11111
11111
11111
11111
11111
11111
11111
11111
11111
11111
11111
11111
11111
11111
11111
11111
11111
11111
11111
11111
11111
11111
11111
11111
11111
11111
11111
11111
11111
11111
11111

对于CSS可调整大小的列，您可以使用此技巧。滥用webkit可调整大小的textarea功能。将标题标题包装在只读文本区域中，样式为标题，只需保留调整大小的拇指即可。使用“最小最大宽度”（min-max width）设置为相同值可禁用垂直调整大小。这只是工作的证明。玩它

<html>  
 <style>
.fixed_headers {

  border-collapse: collapse;
}
.fixed_headers textarea {
  text-decoration: underline;
}
.fixed_headers textarea,
.fixed_headers td {
  padding: 5px;
  text-align: left;
}
.fixed_headers textarea,
.fixed_headers td {
    min-width: 100px;
}
.fixed_headers thead, textarea {
  background-color: #333;
  color: #FDFDFD;
}
.fixed_headers thead tr {

  position: relative;
}
.fixed_headers tbody {

  overflow: auto;
  width: 100%;
  height: 300px;
}
.fixed_headers tbody tr:nth-child(even) {
  background-color: #DDD;
}
.old_ie_wrapper {
  height: 300px;
  width: 750px;
  overflow-x: hidden;
  overflow-y: auto;
}

textarea {
  border: none;
  min-height: 16px;
  max-height: 16px;
}
</style>
    <div style="height: 300px;overflow: auto;">
    <table class="fixed_headers">
    <thead>
    <tr><th><textarea readonly>header 1</textarea></th><th><textarea readonly>header 2</textarea></th><th><textarea readonly>header 3</textarea></th><th><textarea readonly>header 4</textarea></th><th><textarea readonly>header 5</textarea></th></tr>
    </thead>
    <tbody>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    </tbody>
    </table>
    </div> 
</html>


.固定标题{
边界塌陷：塌陷；
}
.fixed_标题文本区域{
文字装饰：下划线；
}
.固定的标题文本区域，
.固定标题td{
填充物：5px；
文本对齐：左对齐；
}
.固定的标题文本区域，
.固定标题td{
最小宽度：100px；
}
.fixed_headers thead，textarea{
背景色：#333；
颜色：#FDFDFD；
}
.fixed_headers thead tr{
位置：相对位置；
}
.固定式车身{
溢出：自动；
宽度：100%；
高度：300px；
}
.fixed_头体tr:n个子体（偶数）{
背景色：#DDD；
}
.旧包装纸{
高度：300px；
宽度：750px；
溢出x：隐藏；
溢出y：自动；
}
文本区{
边界：无；
最小高度：16px；
最大高度：16像素；
}
收割台1收割台2收割台3收割台4收割台5
12345
11111
11111
11111
11111
11111

演示

您真正需要的是标题

th

。如果我正确理解您的问题，这与您的

resize:horizontal

相结合将解决您的问题

表格{
显示：块；
背景色：青色；
高度：200px！重要；
溢出y：滚动；
}
thead th{
位置：粘性；
排名：0；
背景：白色；
z指数：10；
}
th，
运输署{
调整大小：水平；
溢出：自动；
最小宽度：25px；
}
运输署{
字体大小：1.45vmin；
}
t车身{
高度：30px！重要；
背景颜色：绿色；
宽度：100%；
}


校长1
校长2
校长3
校长4
校长5
1.
2.
3.
4.
5.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
div {
    position: relative;
    margin: auto;
    outline: 1px solid #000;
    outline-offset: -1px;
    max-width: 900px;
    max-height: 300px;
    overflow-y: scroll;
}
table{ 
    width: 100%;
    border-collapse: collapse;
}
thead th { 
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    resize: horizontal;
    overflow: auto;
    background: #cff;
}
th, td {
    padding: 5px 10px;
    border: 1px solid #000;
}
th {
    text-transform: capitalize;
}

<div>
    <table>
        <thead>
            <tr><th></th><th>header 1</th><th>header 2</th><th>header 3</th><th>header 4</th></tr>
        </thead>
        <tbody>
            <tr><th>header 1</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
            <tr><th>header 2 2222</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
            <tr><th>header 3</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
            <tr><th>header 4</th><td>1</td><td>2</td><td>3 3333333 3333333 3333333</td><td>4</td></tr>
            <tr><th>header 5</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
            <tr><th>header 6</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
            <tr><th>header 7</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
            <tr><th>header 8</th><td>1</td><td>2 2222 2222 2222</td><td>3</td><td>4</td></tr>
            <tr><th>header 9</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
            <tr><th>header 10</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
            <tr><th>header 11</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
            <tr><th>header 12</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
            <tr><th>header 13</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
            <tr><th>header 14</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
            <tr><th>header 15</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
            <tr><th>header 16</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
        </tbody>
    </table>
</div>