How to make HTML table cells expand horizontally beyond end of page?


Tags: html,css,html-table,css-tables

Problem :

I have a table with many columns. The table is wider than the page, and so it scrolls. The default behaviour of tables seems to be to make the width of each column as small as possible, and allow text to spill over onto a new line.

I'd like instead for my table cells to grow horizontally with their contents, and never to spill over onto a second line. Is this possible using CSS? If not, does anyone have any pointers for how I might start to do this using Javascript (jQuery if poss)?



Solution :

You can use:

td {
  white-space: nowrap;
}

    CSS Howto..

    How to dynamically alter the CSS of a pseudo element with JQuery?

    How to include transparency in html/css?

    how to position two image as a background image on div by css

    How do I make circles within a larger circle, and text within the center of all the circles, in CSS?

    How to remove top border for one element in a list

    How to imitate the native iPhone look and feel in a web app developed with the ASP.NET platform?

    How to get CSS to E-Mails back in Magento 1.9.1

    How to apply multiple CSS selectors to a paticular div?

    HTML/CSS - how to position an image in the above the right and left corner of a panel

    How do I add curved corners to menu in css

    how to change css after some seconds continously?

    How to place text/content below Navbar in CSS/HTML

    How do I use CSS with simple form?

    How to make text blink on website? [duplicate]

    How do I get pictures side by side (responsive)

    How to move this circle using javascript?

    How to display a number (generated dynamically) into a square using CSS

    How can I control button margins using CSS (IE8 compatible)

    How to convert Xpath to CSS

    How to left-align the text in a Bootstrap accordion

    How to add a custom css selector to just a span??

    How to use background image in CSS?

    gulp-cssmin: How to change relative URLs in minified CSS

    How to align colon vertically using css?

    CSS - How to make a relative element follow me up and down but not left and right?

    How to Make Inline SVG Scale to Parent Element with CSS

    Show range slider above Bootstrap progress bar (in navbar)

    How do I float 3 elements right above each other and one left?

    How do I link an external css to overwrite bootstrap css for centering elements?

    ASP.NET MVC2 + CSS - how to refresh CSS?