修改

Question

我希望一个表有一个可滚动的tbody，但是标题不应该滚动。

表格不应占用100％宽度。列不应该比内容宽。

我该怎么做？

尝试https://jsfiddle.net/vxmyh826/4/使其看起来像

使用css

table
{
  border-collapse: collapse;
  max-height: 200px;
  display: inline-block;
}

tbody
{
  max-height: 200px;
  width: 100%;
  display: inline-block;
  overflow-y: scroll;
}

它看起来像

表格边框标有红色。

修改

这不是上述链接的重复，因为我不寻找使用脚本的解决方案（这是一个CSS问题）。

Answer 1

要执行相同的操作，您必须使用两个，即

< thead >
             Your th here
< / thead >

再次重复该主题。

< thead  >
             Your th here
< / thead >

然后是您的< tbody >

它将解决问题。

Answer 2

HTML

table{
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

table th, table td{
    text-align: left;
    width: 25%;
}

table td{
    border-bottom: 1px solid black;
}

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

 table thead{
     width:100%;
     display: table;
 }

CSS

var timeFloatData = [];
if(app.audio || app.microphone){
timeFloatData = new Float32Array(analyser.fftSize);
var analyser = new THREE.AudioAnalyser( audio, fftSize );
var uniforms = {
tAudioData: { 
value: new THREE.DataTexture( analyser.data, fftSize / 2, 1, 
THREE.LuminanceFormat )             
}
};
analyser.getFloatTimeDomainData(timeFloatData);
}

renderer.render( scene, camera )
var listener = new THREE.AudioListener();
var sound = new THREE.Audio( listener );
var audioLoader = new THREE.AudioLoader();
audioLoader.load( 'sounds/Music.mp3', function( 
buffer ) {
sound.setBuffer( buffer );
sound.setLoop( true );
sound.setVolume( 0.2 );
sound.play();
});

“表tbody {display：block;溢出：自动；高度：200;}”使tbody滚动但宽度混乱。要更正，您必须设置“ tablethead {width：calc（100％-20px）; display：table;}”并设置每列的宽度。

如何滚动tbody？

修改

2 个答案: