I trying to apply word-wrap in the table cell, but it's not working.
Line wraps if file name contain space, but if space not there my table going out of div.
I also tried word-wrap and width property to table cell.
display: table-cell;
width: 50%;
word-wrap: break-word;
It works with fix width in pixels, but i can't to that because i need to manage design in all width device.
What css i can apply to make word wrap if table cell have no more space to grow ?
Thanks
Use word-break:break-all instead of word-wrap: break-word;
display: table-cell;
width: 50%;
word-break:break-all;
td {
width:33.3%;
word-break:break-all;
}
<table>
<tr>
<td>largcontent_without_sapce_large_content_without_space</td>
<td>Samll Content</td>
<td>Test Content</td>
</tr>
<tr>
<td>largcontent_without_sapce_large_content_without_space_content_without_space</td>
<td>Samll Content</td>
<td>Test Content</td>
</tr>
<tr>
<td>largcontent_without_sapce_large_content_without_space</td>
<td>Samll Content</td>
<td>Test Content</td>
</tr>
</table>
You can use overflow property of css in your table.
overflow:auto;
This will be working for every screen size.
Related
Setting some tds to have border widths to "thin" and some to "0" with border-collapse: collapse; I would have thought would give me no 2px-wide borders, but yet I get inconsistent borders. It seems to be a problem when one has display:flex on it--gets rendered 2px wide instead of 1px, as if there is no border-collapse. Is this a shortcoming of Chrome or am I missing a CSS technique?
Does anyone have insight on what circumstances cause border-collapse to fall short of the ideal in Chrome?
Here's the effect in an example - cell two seems to ignore border-collapse.
table {
box-sizing: border-box;
border-collapse: collapse;
}
td {
border-left: thin solid #d3d3d3;
border-right: thin solid #d3d3d3;
}
.d-flex { display: flex; }
<table class="my-grid">
<tr>
<td>cell one</td>
<td class="d-flex">cell two</td>
</tr>
<tr>
<td>cell three</td>
<td>cell four</td>
</tr>
</table>
The border-collapse property only applies to table and inline-table elements.
You're telling the table cell to display as flex instead of an inline-table element so it can't collapse its borders.
Note that this is not specific Chrome either. Testing in Edge and Firefox yields the same result.
Using display: flex; makes the cell lose some of its desirable table cell properties, since it is no longer set to display: table-cell;, and there is no display: table-cell-flex.
So the only solution seems to be to add a container <div> element inside the <td>, which should by nature take up the entire table cell except for its padding if any, and make it have display: flex; so that I can use flexbox styles for the content.
table {
box-sizing: border-box;
border-collapse: collapse;
}
td {
border-left: thin solid #d3d3d3;
border-right: thin solid #d3d3d3;
}
td {
display: table-cell;
vertical-align: inherit;
}
.d-flex { display: flex; }
<table class="my-grid">
<tr>
<td>cell one</div></td>
<td><div class="d-flex">cell two</div></td>
</tr>
<tr>
<td>cell three</td>
<td>cell four</td>
</tr>
</table>
I have an interesting CSS question for some of you CSS wizards. I have a table that has user generated content, and I want to limit long columns to a maximum width. The table is not fixed layout, and the column widths are user-specified too but by default should have a maximum width.
<table>
<thead>
<tr><td>Header 1</td><td>Header 2</td></tr>
</thead>
<tbody>
<tr><td>Text</td><td>1</td></tr>
<tr><td>Text</td><td>2</td></tr>
<tr><td>Long Text Here</td><td>3</td></tr>
</tbody>
</table>
I added overflow: hidden, white-space: nowrap, and text-overflow: ellipsis to the header's css class, and in the above html the text 'Long Text Here' pushes the width of that column out. But this makes it so that the column width can only be that text length or longer.
What can I do - other than use fixed layout - to make a cell shrink, and show ellipses?
Thanks!
A simple option would be to set a maximum width on the column, so that a few really long entries don't make it ludicrously wide. For example, to do this for the first column:
td:first-child {
max-width: 5em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<table>
<thead>
<tr><td>Header 1</td><td>Header 2</td></tr>
</thead>
<tbody>
<tr><td>Text</td><td>1</td></tr>
<tr><td>Text</td><td>2</td></tr>
<tr><td>Really, Ridiculously Long Text Here</td><td>3</td></tr>
</tbody>
</table>
(You could use :nth-child(), or maybe classes, to restrict other columns.)
This solution requires the maximum width to be set in the CSS, however, which might not be very useful for dynamic content. Instead, you could set it in style attributes in the HTML directly, which is easier to do using JavaScript or your templating system:
td:first-child, th:first-child {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<table>
<thead>
<tr><th style="max-width: 5em">Header 1</th><th>Header 2</th></tr>
</thead>
<tbody>
<tr><td style="max-width: 5em">Text</td><td>1</td></tr>
<tr><td style="max-width: 5em">Text</td><td>2</td></tr>
<tr><td style="max-width: 5em">Really, Ridiculously Long Text Here</td><td>3</td></tr>
</tbody>
</table>
Hi I am not sure if you are asking for something like this
https://jsfiddle.net/MAXXALANDER/o6x1nt93/15/
table{
width:100%;
}
td {
width:50%;
float:left;
padding:0;
margin:0;
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
}
According to spec, Fixed table layout won't work with width set to auto:
17.5.2.1 Fixed table layout
With this (fast) algorithm, the horizontal layout of the table does
not depend on the contents of the cells; it only depends on the
table's width, the width of the columns, and borders or cell spacing.
The table's width may be specified explicitly with the 'width'
property. A value of 'auto' (for both 'display: table' and 'display:
inline-table') means use the automatic table layout algorithm.
However, if the table is a block-level table ('display: table') in
normal flow, a UA may (but does not have to) …
Is there any hack to make it work anyway (using pure CSS)?
What I have: table-layout: fixed takes no effect with width: auto:
table{
/* those two won't work togheter */
table-layout: fixed;
width: auto;
}
td{
/* pure visual purpose */
border: 1px solid black;
padding: 10px;
}
<table>
<tr>
<td>Mid long text</td>
<td>The very longest text</td>
<td>Short</td>
</tr>
</table>
What I want to get: All table cells's width is set to the widest one:
// width of widest table cell (in px)
var max = 0;
// get width of widest table cell (in px)
$('table td').each(function(){
max = Math.max(max, $(this).width());
});
// set width of all cells to the width of widest one
$('table td').each(function(){
$(this).css('width', max +'px');
});
table{
/* those two won't work togheter */
table-layout: fixed;
width: auto;
}
td{
/* pure visual purpose */
border: 1px solid black;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Mid long text</td>
<td>The very longest text</td>
<td>Short</td>
</tr>
</table>
Just assign a percentage width to the td - you don't need any CSS rule for table itself then (see snippet)
.container {
background-color: #0fa;
}
table {
background-color: #fa0;
}
td{
border: 1px solid black;
padding: 10px;
width: 33%;
}
<div class="container">
<table>
<tr>
<td>Mid long text</td>
<td>The very longest text</td>
<td>Short</td>
</tr>
</table>
</div>
I have the following code here:
table {
border-collapse: collapse;
border-spacing: 0px;
resize: both;
}
td {
border: 2px solid black;
padding: 10px 20px 10px 20px;
margin: 0px;
resize: both;
overflow: auto;
}
div {
resize: both;
overflow: auto;
width: 120px;
height: 120px;
border: 1px solid black;
}
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<br>
<div></div>
It doesn't work in Chrome, Safari or IE.
If you re-size the width of the top-left cell, and then re-size the width of the middle-left cell it will not let you downsize the width.
If you try to downsize via the top-left cell again it will not work
either.
How should I fix it?
When you resize an element using the CSS resize property, a CSS height/width are applied inline to that table cell.
Example:
Now, let's resize the cell below it so that the width is smaller:
It doesn't work, the width of the top cell does not change and the column remains the width of its largest cell.
This particular behaviour is not a bug, it is a limitation of the resize property. To get the result that you want, you would need to adjust the width of all the cells in the column, when one is resized. This would require javascript.
Note: I'm not saying that Chrome (tested 44.0.2403.130 m) doesn't have bugs using the resize property on table cells, it does display very buggy behaviour.
Maybe the bug is your code. You may not to allow resize tables and tds. You can resize divs inside your td and it was correct. Table and cell resizing is not allowed in firefox and in webkit browsers it is dangerous.
You can make something like this:
<table>
<tr>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</tr>
<tr>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</tr>
<tr>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</tr>
</table>
<br>
<div></div>
And the css
table, td { resize: none; }
table td div { min-width: 50px; min-height: 50px; resize: both; }
I have the following requirements for table behavior on my website:
cells will never get any explicit width, I will leave cell sizing to the browser based on content
The table as a whole should never take up more than 100% width
In some edge cases, even with an enforced max-width and the table wrapping, the total width may still exceed 100% (for example on mobile). In that case, I want the table be of 100% width, with horizontal scrolling.
To accomplish the above, checkout this JSBin.
HTML:
<table>
<thead>
<tr>
<th>Column one</th>
<th>Column two</th>
<th>Column three</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1</td>
<td>2.1</td>
<td>3.1</td>
</tr>
<tr>
<td>1.2</td>
<td>2.2</td>
<td>3.2</td>
</tr>
<tr>
<td>1.3</td>
<td>2.3</td>
<td>3.3</td>
</tr>
</tbody>
</table>
CSS:
table {
display: block;
table-layout: fixed;
overflow-x: scroll;
max-width:100%;
background-color: #697A09 !important;
}
th, td {
padding: 10px;
background-color:white;
width:auto;
}
The thinking behind this setup: max-width on tables only works when the table is set to display:block. Horizontal scrolling for edge cases (small viewports) is accomplished using overflow-x in combination with table-layout:fixed.
This satisfies my requirements, but there is one unexpected issue: using display:block will make the table itself use 100% of width. However, the cells don't seem to follow that 100%, combined they take up far less than 100% of the table's width, as I tried to highlight in the example using different background colors.
What I basically want is to have the table always take up exactly 100% of whatever parent element it is in, and to have cells distributed across that 100%, without explicitly setting their width.
Is such a thing possible?
the code might help as follows:
table {
overflow-x: scroll;
max-width:100%;
background-color: #697A09 !important;
width: 100%;
}
th, td {
padding: 10px;
background-color:white;
width:auto;
}