Databases
StackOverflow2013
Postsdbo
POHow to prevent text in a table cell from wrapping
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to prevent text in a table cell from wrapping
    text
    copied!<p>Does anyone know how I can prevent the text in a table cell from wrapping? This is for the header of a table, and the heading is a lot longer than the data under it, but I need it to display on only one line. It is okay if the column is very wide.</p> <p>The HTML of my (simplified) table looks like this:</p> <pre><code>&lt;table&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt; &lt;div&gt;Really long column heading&lt;/div&gt; &lt;/th&gt; &lt;th&gt; &lt;div&gt;Really long column heading&lt;/div&gt; &lt;/th&gt; &lt;th&gt; &lt;div&gt;Really long column heading&lt;/div&gt; &lt;/th&gt; &lt;th&gt; &lt;div&gt;Really long column heading&lt;/div&gt; &lt;/th&gt; &lt;th&gt; &lt;div&gt;Really long column heading&lt;/div&gt; &lt;/th&gt; &lt;th&gt; &lt;div&gt;Really long column heading&lt;/div&gt; &lt;/th&gt; &lt;th&gt; &lt;div&gt;Really long column heading&lt;/div&gt; &lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt; &lt;div&gt;data&lt;/div&gt; &lt;/td&gt; &lt;td&gt; &lt;div&gt;data&lt;/div&gt; &lt;/td&gt; &lt;td&gt; &lt;div&gt;data&lt;/div&gt; &lt;/td&gt; &lt;td&gt; &lt;div&gt;data&lt;/div&gt; &lt;/td&gt; &lt;td&gt; &lt;div&gt;data&lt;/div&gt; &lt;/td&gt; &lt;td&gt; &lt;div&gt;data&lt;/div&gt; &lt;/td&gt; &lt;td&gt; &lt;div&gt;data&lt;/div&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; </code></pre> <p>The heading itself is wrapped in a div inside the <code>th</code> tag for reasons pertaining to the javascript on the page. </p> <p>The table is coming out with the headings wrapping onto multiple lines. This seems to only happen when the table is sufficiently wide, as the browser is trying to avoid horizontal scrolling. In my case, though, I want horizontal scrolling.</p> <p>Any ideas?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload