溢出-x在表上，宽度不固定

Question

我有一张表，其中第一列有很多文本，其他列只是数字。我想获得固定宽度的第一列，比如60％，如果有更多文本，我想要一个水平滚动条。

换句话说文本应该在一个行，如果更大的显示水平滚动条

我管理与table-layout:fixed;去实现它，但是我不希望它是固定的（我想的第一列是更大。）

这是一个jsfiddle，它可以更好地解释它。 https://jsfiddle.net/t7kL3mmm/1/

坦克你。

Answer 1

看看这个。你可以把你的文字在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>