創建一個單行文本表與自動scrool水平適合div寬度

我需要幫助創建一個適合div寬度的表，如果它將比contenitor大，自動添加水平scrool欄。我也希望表中每個字段只有一行。創建一個單行文本表與自動scrool水平適合div寬度

這是當前的代碼：

<div id="RiepilogoDatiSito"> 
    <table> 
     <thead > 
     <tr><td> . . .</td></tr> 
     </thead> 
     <tbody> 
     <tr . . .> 
      <td>. . .</td> 
      </tr> 
     </tbody> 
    </table> 
</div>

然後是CSS

#RiepilogoDatiSito{ 
    clear: both; 
    max-width: 100%; 
    height: 70%; 

    min-height: 200px; 
} 

table, th, td { 
    border: 1px solid black; 
    border-collapse: collapse; 
} 

table { 
    table-layout: fixed; 
    width: 100%; 
    border: 1px solid red; 
    overflow-x: scroll; 
    overflow-y: scroll; 
} 



td { 
    border: 1px solid blue; 
    white-space:nowrap; 
}

來源

2017-10-19 Alessandro Pierro

大哥檢查這個撥弄這就是你要那麼你將滾動在一個錯誤的地點

<div id="RiepilogoDatiSito"> 
<table> 
    <thead > 
    <tr><td> . . .</td></tr> 
    </thead> 
    <tbody> 
    <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
    </tbody> 
    </table> 
    </div>

什麼

和你的CSS應該是這樣的

#RiepilogoDatiSito{ 

clear: both; 
width: 100%; 
height: 300px!important; 
overflow-x: scroll; 
overflow-y: scroll; 
    min-height: 200px; 
    display:block; 
    } 

table, th, td { 
    border: 1px solid black; 
    border-collapse: collapse; 
} 

table { 
table-layout: fixed; 
width: 100%; 
border: 1px solid red; 

} 



    td { 
    border: 1px solid blue; 
    white-space:nowrap; 
    }

這裏是小提琴

https://jsfiddle.net/a5qe4nvj/

來源

2017-10-19 11:27:58

是的，這就是我想要的，但仍然有一個問題，文本繼續重複它的自我 –

對不起，我不明白它 –

看看這個現在HTTPS其中的文字： //jsfiddle.net/a5qe4nvj/1/ –

創建一個單行文本表與自動scrool水平適合div寬度

回答

相關問題