オーバーフロー-xテーブルの幅が固定されていない

Question

最初の列に多くのテキストがあり、他の列は単なる数値です。私は60％の固定幅の最初の列を取得したいと思います。さらにテキストがある場合、水平スクロールバーが必要です。私がする最初の列をしたい（

は、言い換えれば、テキストを1行にする必要がありますし、大きな

は、私はtable-layout:fixed;とそれを達成するために管理し、水平スクロールバーを表示している場合しかし、私はそれが固定されないようにします大きい）。

ここでは、それをよりよく説明するjsfiddleがあります。 https://jsfiddle.net/t7kL3mmm/1/

タンクしてください。

Answer 1

これをチェックしてください。あなたは[この]（https://jsfiddle.net/v022bhvc/）のような何かをしたいたのにdivにテキストを入れて、white-space: nowrap;

https://jsfiddle.net/t7kL3mmm/8/

.first-table-el { 
 
    max-width: 60vw; 
 
} 
 

 
.first-table-el div { 
 
    max-height: 50px; 
 
    overflow: auto; 
 
    overflow-y: hidden; 
 
    white-space: nowrap; 
 
} 
 

 
table { 
 
    border: 1px solid black; 
 
    width: 100%; 
 
} 
 

 
td { 
 
    /*  width: 100px; */ 
 
    /*  overflow-x: scroll; */ 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.3/css/bulma.css" rel="stylesheet"/> 
 
<table class="table is-stripped is-narrow"> 
 
    <th>Title 1</th> 
 
    <th>Number 2</th> 
 
    <th>Number 3</th> 
 
    <th>Number 4</th> 
 
    <th>Number 5</th> 
 
    <th>Number 6</th> 
 

 
    <tbody> 
 
    <tr> 
 
     <td class='first-table-el'> 
 
     <div> 
 
      This is usually a very long text, I don't want it to go on multiple lines, but rather stay on one and have a X scroll to read it 
 
     </div> 
 
     </td> 
 
     <td :style="">##</td> 
 
     <td :style="">##</td> 
 
     <td :style="">##</td> 
 
     <td :style="">##</td> 
 
     <td :style="">##</td> 
 
    </tr> 
 
    </tbody> 
 
</table>