CODEWITHSUNDEEP
htmlcss
Costantin
Costantin

Reputation: 2656

overflow-x on table with width not fixed

I have a table on which the first column has a lot of text, the other columns are just numbers. I want to get the first column of a fixed width of let's say 60% and if there is more text I want to have a horizontal scroll bar.

In other words the text should be in one line and if bigger show a horizontal scrollbar

I manage to achieve it with table-layout:fixed; however I don't want it to be fixed (I want the first column to be larger.)

Here is an jsfiddle which explains it better. https://jsfiddle.net/t7kL3mmm/1/

Tank you.

Upvotes: 2

Views: 3700

Answers (1)

tech2017
tech2017

Reputation: 1806

Check this out. You can put your text in a div and use 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>

Upvotes: 3

Related Questions