What methods can be used to stop word-wrap in a table cell and expand the table's width?

Question

What methods can be used to stop word-wrap in a table cell and expand the table's width?

My current scenario involves creating a mobile-friendly table using HTML. I need to apply CSS in order to:

Ensure that all cells (td) do not break words, but only break at white spaces. Using white-space: nowrap; is not an acceptable solution.
Make all columns expand in width without word breaking, breaking only at white spaces, even if it results in overflow (scrolling will be implemented).

<div style="overflow: scroll;">
  <table>
    <thead>
      <!-- some header -->
    </thead>
    <tbody>
      <tr>
        <td>Some text</td>
        <td>Some evenlongertext with words in multiple_lines</td>
        <td>Some supersupersuperlong text.</td>
      </tr>
      <!-- etc., more rows. -->
    </tbody>
  </table>
</div>

EDIT 1: Here is how my table currently appears on a mobile screen: https://i.sstatic.net/65F6g.png

I want the table to expand in width to prevent any word breaking, even if it overflows horizontally.

EDIT 2: Clarification regarding word wrapping: I want the table to grow without breaking the entire string. For example, the string "Some evenlongertext with words in multiple_lines" can be displayed as:

Some
evenlongertext
with words in
multiple_lines

without breaks within individual words.

Edit 3: It seems like the global stylesheet for my website has set word-break: break-word;, which I cannot modify.

html css html-table

Answer 1

Answer №1

If you want your cells to be responsive, consider using flex-box and treating each cell as a div. This approach works well for mobile apps. Wrap all the cells in another div and assign the class wrapper or container. Your CSS will look like this:

wrapper {
   display: flex;
   justify-content: center;
}

.cell {
   height: 100px;
   width: 100px;
}

Answer 2

If you want your cells to be responsive, consider using flex-box and treating each cell as a div. This approach works well for mobile apps. Wrap all the cells in another div and assign the class wrapper or container. Your CSS will look like this:

wrapper {
   display: flex;
   justify-content: center;
}

.cell {
   height: 100px;
   width: 100px;
}

What methods can be used to stop word-wrap in a table cell and expand the table's width?

Answer №1

Similar questions

SSI stands for Server Side Includes, a feature that allows

Implement a transition effect for the onClick event of a div element

Capture Your Scene with Three.js

Change wiki text into HTML using Python for showcasing on a webpage

Javascript: object continuously moving despite key being released

Detecting click events in D3 for multiple SVG elements within a single webpage

What is the best way to update the current route in Angular 2 programmatically?

Struggling to figure out why BXSlider won't cooperate

Updating tooltip text for checkbox dynamically in Angular 6

Using jQuery AJAX to Transfer Data to a PHP Script

What is the reason border property does not transition effectively?

How to disable CSS transition on Angular 4 component initialization

Having trouble understanding why adding raw HTML is yielding different results compared to generating HTML using jQuery

Using jQuery to retrieve the location of an element with a specific class

Challenge with shifting list items

Count characters in multiple text inputs with AngularJS

Creating dynamic scrolling effects using windows.scrollBy in JavaScript

Error message notifying user that an index is not defined in an ajax

jquery has a strange behavior where the dialog window will cover up the scrollbar when the main

Tips for integrating external JavaScript libraries and stylesheets into a widget