bulma table cell truncation

by jorgeluis

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<div class="section">

  <table class="table is-striped">
      <thead>
          <tr>
              <th>id</th>
              <th>name</th>
              <th>description</th>
              <th>phone</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>1</td>
              <td>alpha</td>
              <td class="is-truncated">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
              <td>555-555-5555</td>
          </tr>
          <tr>
              <td>2</td>
              <td>beta</td>
              <td class="is-truncated">Sed et nulla neque.</td>
              <td>555-555-5555</td>
          </tr>
          <tr>
              <td>3</td>
              <td>gamma</td>
              <td class="is-truncated">Morbi imperdiet neque ut lorem rhoncus fermentum.</td>
              <td>555-555-5555</td>
          </tr>
      </tbody>
  </table>

</div>

CSS

/* truncate all cells */
.table.has-truncated-cells { 
  width: 100%;
  table-layout: fixed;
  white-space: nowrap;
  td {
    overflow: hidden;
    text-overflow: ellipsis;
    &.is-clipped {
      // button cells shouldn't ellipsis
      text-overflow: clip;
    }
  }
}

/* normal table, truncate only a specific cell */
td.is-truncated {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 1px;
}