Question

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

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

我设法用table-layout:fixed;来实现它，但是我不希望它被修复（我希望第一列更大。）

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

坦克你。

Answer 1

检查一下。您可以将文字放在div中，然后使用white-space: nowrap;

.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>

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

1 个答案: