Hack

bootstrap responsive table content wrapping

When I view the output in a small view-port, the table is re-sized properly, but the paragraph content in the table cells are not wrapped, so scroll-bars are shown. I expected the responsive behavior would have been to wrap the paragraph content. How do I achieve this?

The behavior is the same whether I put the content inside

or not

11 Answers 11

just simply use as below and it will word wrap any long text within a table . No need to anything else

Hi UberNeo, your response works and i like it because you do not have to modify anything else except the TD. The only point is that you also have to add «white-space:normal» to the style in order to maintain the responsive characteristics of the table, if not, at certain resolutions the wrap is not made and the scroll of the table does not appear.

So you can use the following :

I ran across the same issue you did but the above answers did not solve my issue. The only way I was able to resolve it — was to make a class and use specific widths to trigger the wrapping for my specific use case. As an example, I provided a snippet below — but I found you will need to adjust it for the table in question — since I typically use multiple colspans depending on the layout. The reasoning I believe Bootstrap is failing — is because it removes the wrapping constraints to get a full table for the scrollbars. THe colspan must be tripping it up.

The behaviour is on purpose:

Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

Which means tables are responsive by default (are adjusting their size). But only if you wish to not break your table’s lines and add scrollbar when there is not enough room use .table-responsive class.

If you take a look at bootstrap’s source you will notice there is media query that only activates on XS screen size and it sets text of table to white-space: nowrap which causes it to not breaking.

TL;DR; Solution

Simply remove .table-responsive element/class from your html code.

Источник

How to Wrap the Content of a Table Cell

As we know, the contents of a table can change its structure or dimensions. So, there can be several difficulties with table cells. For example, long words in a table cell may cause the cell width to increase, or long words may cross the cell borders. But you can avoid these by using word wrapping on the cell content.

In this snippet, we suggest two methods: either using the CSS word-wrap or word-break property.

Solution with the CSS word-wrap property

Use the border-collapse property set to «collapse» and table-layout property set to «fixed» on the element. Also, specify the width of the table. Then, set the word-wrap property to its «break-word» value for elements and add border and width to them.

Example of wrapping the content of a table cell with the word-wrap property:

html> html> head> title>Title of the document title> style> table < border-collapse: collapse; table-layout: fixed; width: 310px; > table td < border: solid 1px #666; width: 110px; word-wrap: break-word; > style> head> body> table> tr> td>1 td> td>What is Lorem Ipsum? td> td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. td> tr> tr> td>2 td> td>Why do we use it? td> td>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. td> tr> table> body> html>

If you want to wrap a word on a new line, use the word-wrap property, but if you need to break it at any appropriate character, use the word-break property.

Solution with the CSS word-break property

Example of wrapping the content of a table cell with the word-break property:

html> html> head> title>Title of the document title> style> table < border-spacing: 0px; table-layout: fixed; margin-left: auto; margin-right: auto; width: 310px; > td < border: 1px solid #666; word-break: break-all; > style> head> body> table> tr> td>1 td> td>What is Lorem Ipsum? td> td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. td> tr> tr> td>2 td> td>Why do we use it? td> td>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. td> tr> table> body> html>

Источник

How to wrap long HTML table cell

I have a table with two rows. The second row consists of a long text in a colspan=»2″. How can this text be wrapped so the table is not wider then the two first row cells? I can’t set a fixed width for the table, because the first two cells are dynamic. http://jsfiddle.net/qLpuq/1/

 
 
Cell 1
 
Cell 2
 
 
Very long cell that should just be as long as the first two cells and wrap, but not take all the screen width.
 
 
 

3 Answers 3

I’m afraid there’s no direct solution. You could play with JavaScript, creating copy of the table containing only the first row, get its width, discard the copy, and use the width to set the width of your real table. Combined with the setting table-layout: fixed , this should handle the situation. You can simplify the approach so that you do not create a copy of the table but instead remove the second row, later add it back. It gets rather ugly:

  table < table-layout: fixed >tr:first-child td Very long cell that should just be as long as the first two cells and wrap, but not take all the screen width.  

A completely different idea is to use a workaround where the long text is not in a cell but in a caption element, placed at the bottom of the table:

  Very long cell that should just be as long as the first two cells and wrap, but not take all the screen width. 
Cell 1
 
Cell 2
 
 
 

Источник

How do I let width of table determine width of entire page

I have an HTML page that contains a table. The table is dynamically generated from a database on the server side. I would like the width of the table to determine the width of the entire page. That is, other block elements above and below the table should take on the same width as the table. I do not want to use fixed widths. I prefer a pure css solution but if fudging things with JavaScript is the only way, then so be it. I need fairly wide browser support. I tried using a div with display: inline-block around the table and the other block elements. The idea was to have the div «shrink to fit» around the table and thereby set the width of the other elements. This did not work and I think it’s because the div does not know which of the elements inside should be the «master», determining the width for the other elements. Edit: Added a fiddle: http://jsfiddle.net/5Z3ru/. In this example, I would like the paragraph above the table to be the same width as the table (not the other way around). I do not want to use a fixed width for the table or paragraph. Edit 2: Conceptually, what I am looking for can be imagined as if the table is rendered alone in a separate document. Then, the rendered table is inserted into a new document and the width of the rendered table is used for setting the width of the new document. So, nothing in the final document affected the rendering of the table, and the table width becomes the only factor in deciding the width of the final document.

AFAIK, tables will naturally shrink or grow according to their content. Setting width:100% will only force it to fill the available document space, not force the document to adapt to the table. If you don’t want your

‘s wrapping, you could apply nowrap to their content, but that’s about all you can do other than give the table an absolute (or min) width.

What about a Fiddle? With your rep points I believe you should know the basic requirements of a question.

@Terry: I don’t usually hang out over here in HTML/CSS-land. Do you have a pointer to the requirements?

Источник

Force variable width table column contents to wrap at max-width *only*

As long as the whole width of the table fits on screen, there’s no problem. However, when the available space is exceeded, the browser will do anything to make it fit by wrapping sooner than I intent. Also smaller columns will decrease in width and start to wrap.

  
 
Small text, should not wrap
 
Long text, should wrap at 1000px only; [. ]
 
 
 

I’m using white-space:pre-wrap , because the content must be able to wrap, even though the original data doesn’t contain newlines. When I use white-space:pre , the column widths are exactly right, but obviously the content will overflow beyond the cell. I’ve tried to overcome this by adding overflow-wrap:break-word , but that didn’t work..

I need the answer to this too, but for my case it’s for a normal div instead of a table. I think it can be described as: make all lines as long as possible, minimize line breaks.

I found another question that answers this nicely. CSS: element should get max-width before breaking words. The solution is to use ::after

1 Answer 1

Apparently there’s no pure-CSS solution to this. In the meantime I’ve found a reliable work-around with a little bit of html and javascript.

I’ve put a around the table, and gave it a width of number_of_columns * max_column_width , essentially the maximum width the table would have if all columns exceed the threshold.

This results in the table being rendered the way I intended, however this obviously causes a horizontal scrollbar reaching way beyond the rendered table. Therefore I need to reduce the width of the to the actual width of the rendered table.

div.style.width = table.offsetWidth + 'px'; 

Not very elegant, but it does the job.

Apparently this is not a 100% fix. If the screen width exceeds the minimum width the browser is able to draw the table, it will do so. Once the window is resized to below this width, the table snaps to the desirable format.

Источник