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 make input box show up from right to left?

    How Do I Add product descriptions (short) to hover box in woocommerce?

    CSS How to add content under fixed position navbar [closed]

    How to deal with DIV position and height

    How to include php page which include also a css file?

    How to underline button text (using CSS) when mouse pointer is over the button?

    How to target last TD cell?

    How to change CSS to the same class but another input name

    How to adapt height of an element to another in CSS

    How to get the max width of my css element using javascript

    How can my website store strings locally? [closed]

    Change Color Themes - How To Prevent the Site Goes Back to Default

    How to make semi-transparent select2?

    How to dynamically modify CSS class using Javascript / jQuery with wrapper?

    How do I align my navbar so it's permanently in the middle of my white box (without padding etc)?

    How to property adjust table?

    how to use liveview in dreamweaver cs5 and local xampp server

    CSS: How to make a nav menu with a sub nav menu directly below it?

    Percentages in CSS: How are they calculated internally?

    How to format a button with in Form tag, html?

    How to display sub sub menu to the left side using CSS?

    How to remove table column with CSS

    How to call the event of one element in another element in JQuery

    How to get sourcemaps working for React Css Modules?

    How do I insert tag using :after css property?

    How to set max-width for DIV contents but not the DIV itself?

    How to style a link which wrote with echo? [closed]

    attaching div to a specific element for showing with javascript

    How to align form at the center of the page in html/css

    How to show color only to the first li?