可滚动tbody的td内的div。滚动条问题

table > tbody { 
    height: 600px; 
    display: block; 
    overflow: auto; 
} 

table > tbody > tr { 
    width:100%; 
    height: 1440px; 
    display:table; 
    table-layout:fixed; 
}

此css使可滚动'表'或可滚动'tr'。有用。但我的问题是，'tr'里面'td'内有'div'。当我将'div'的高度设置为100％或任何高度以使整个'div'不在tbody的可见范围内时（在此情况下在600像素内），将出现文档的滚动条。表格的滚动条与“div”相同。可滚动tbody的td内的div。滚动条问题

只要'div'的底部应该位于'tbody'后面，文档的滚动条就会延长。当我滚动表格时，文档的滚动条没有改变。

这里是我的问题的一个很粗糙的版本：https://jsfiddle.net/hL8hemka/14/

正如你可以看到，有两个滚动条。如果您看不到两个，请尝试在css部分中删除div { height: 100% }。您会注意到右侧（文档滚动条应该在哪）消失的两个条中的一个。

如何在文档上没有滚动条的情况下使用tr的100％高度来制作div？

来源

2016-07-05 user3290525

为什么地球上你想'tr'显示为'table'？ ...对我来说，它超越了所有的逻辑 – LGSon

@LGSon你认为这是什么原因造成的问题？我真的很难找出你在你的评论中提出的建议...... – user3290525

我还没有提出解决方案，我只是想知道为什么你要设置一个'tr'来显示为'table' ...所以你其实不需要那样做？ ...如果不是的话，我会在上班时发布一个解决方案 – LGSon

我没有在你的小提琴中看到两个滚动条，除非你的意思是有一个水平和垂直滚动条？无论采用哪种方式，如果您想在任何元素上隐藏滚动条，只需将overflow-x或overflow-y（取决于滚动条是垂直还是水平）设置为隐藏即可。例如，如果我想隐藏垂直滚动条我会设置溢出-X到隐藏在我的CSS像这样：

body { 
    overflow-x: hidden; 
}

来源

2016-07-05 15:11:18 Cameron637

就禁止滚动：

body 
{ 
    overflow: hidden; 
}

fiddle

来源

2016-07-05 15:12:50 CdSdw

哇。这实际上是有道理的。如果我不需要滚动条，似乎合法，但如果我想要滚动条，但不是“多功能”滚动条，该怎么办？ – user3290525

这因为你已经为td添加了一个边框，请删除它，它适合所有的东西。 x轴上的滚动条隐藏。

td { 
border:none; 
} 

div { 
    border: 1px solid #111; 
    height: 100%; /* Removing this hides the 'document' scrollbar*/ 
}

来源

2016-07-05 15:14:35 frnt

如果表格单元格中没有任何其他元素，我建议您使用不同的方法。而不是将高度设置为div，您可以将其定位为绝对元素。这样，您可以使用顶部，左侧，右侧和底部属性来确定尺寸。

td { 
    position:relative; 
} 

td > div { 
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
}

来源

2016-07-06 09:13:50 thetont

可滚动tbody的td内的div。滚动条问题

回答

相关问题