I have a table that will display the name of camera and its model. The problem is when a name/model string is too long the cell gets resized and therefore makes the table body out of sync with the head.
<td>
<div class="camera_details">
<div class="camera_models">XXXCAMERAMODELXXX</div>
<div class="camera_name">XXXCAMERANAMEXXX</div>
</div>
</td>
This has CSS like so:
td{
max-width: 144px;
}
.camera_details {
max-width: 144px;
}
.camera_models {
text-overflow: ellipsis;
overflow: hidden;
}
.camera_name {
text-overflow: ellipsis;
overflow: hidden;
}
table {
table-layout: fixed;
}
The problem only exists on IE8 where the div get restricted due to max-width but the td element doesn't which still causes misalignment in the table.
Is the a way I can force the td to be a certain width regardless of the width of the children divs?
Define table-layout:fixed; in your table. Write like this:
table{
table-layout:fixed;
}
You could apply the following styles to your div's:
overflow: hidden;
white-space: nowrap;
You will also need to specify a width.
Related
I'm trying to make a two column CSS table (tried HTML table too) with one row where the first column is one line of text and it expands to fit the content. The second column needs to be a single line of text that is right justified and expands left until it hits the first column and then becomes an ellipsis.
This first column is working with white-space: nowrap;. The second column is the issue:
When the content is longer than the second column max width, it will wrap. Once I add white-space: nowrap; it overflows and ignores the width, max-width and overflow: hidden;
Here is a JSFiddle showing what I'm getting vs. what I'm trying to get. Thanks!
https://jsfiddle.net/esodell1/oq59jkr3/10/
UPDATE
Thanks for the responses, but I found a way to accomplish this using flex box!
https://jsfiddle.net/esodell1/jdykzv5m/13/
So this is how the text-overflow technique works. There needs to be a defined width of it's parent or a closest parent. You'll need to defined a width for your cell such as:
&:last-child {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 85%;
text-align: right;
}
But you'll also have to limit your table since table naturally tries to expand as much as the content in its child requires by using table-layout:
.table {
display: table;
padding: 0.25rem;
table-layout: fixed;
width: 100%;
}
This will make the right column create the ellipsis when the cell reaches 85% of its available width. The problem you'll be faced with is dealing with the left column because you also have no-wrap set on it so that column might actually exceed 15% width and overlap with the right. The issue is both your column is trying not to wrap and fighting for table space, you'll need to apply the same text-overflow technique on the left column. See the the previous and last example here:
https://jsfiddle.net/bhL6sx0g/
To be honest if you're dealing with many columns with dynamic content like this that you don't want wrapping you might want to add a layer of JS on top to do some of your sizing for you else the best option is delegate the actual widths such as a 15/85 split and stick to it.
Edit:
Give width units in vw(viewport width). Notice changes in scss of table(width), first-child( width, min-width) and last-child(width, max-width).
This vw will behaved strangely in jsfiddle, try in .html only.
.table {
display: table;
padding: 0.25rem;
width:90vw;
.row {
display: table-row;
.cell {
display: table-cell;
border: 1px solid gray;
padding: 0.25rem;
&:first-child {
white-space: nowrap;
width:20vw;
min-width:20vw;
}
&:last-child {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 70vw;
max-width: 70vw;
text-align: right;
}
}
}
}
Previous
By max-width:100% it can stretch to take full size of parent. You need limit it to some percentage or pixels to achieve desired effect.
Removed width:100% as it was useless and changed max-width:200px
&:last-child {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/* width: 100%; */
max-width: 200px;
text-align: right;
}
I have table that sometimes have long strings as values.
How can i show the entire content of a tablecell if the overflowing content his hidden?
I'm thinking the cell should be expand while overlapping adjacent cells without displacing them.
Currently im using this css:
table{
table-layout: fixed;
margin-top: 24px;
th{
white-space: normal;
word-wrap: break-word;
}
td{
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
td:hover{
overflow: visible;
z-index: 1;
background-color: grey;
}
}
This does make the overflowing text visible and overlapping adjacent cells. But the background/cell wont follow.
Thanks!
This is what I got for your situation: jsFiddle
First of all, I changed the css so that the table selector does not contain the other selectors. (note that this is not needed if you are using SASS or LESS as pointed out in the comments)
table{
table-layout: fixed;
margin-top: 24px;
} <--- place it here instead of at the end of the css rules for the table
th{
white-space: normal;
word-wrap: break-word;
}
And then I also adjusted the css rules for 'td' and 'td:hover':
td{
max-width : 50px;
white-space : nowrap;
overflow : hidden;
}
td:hover{
overflow: visible;
z-index: 2;
background-color: grey;
max-width:initial;
}
Hope this is what you wanted to achieve.
EDIT
After some comments and knowing you don't want the adjacent cells to move, I found this jsFiddle (this one is still a bit jumpy on hover, so maybe someone else knows how to fix this; I don't see how to solve that right now)
I have an HTML table, with headings in the first column and data in the later columns. It has to fit into a certain width on page, but the all cells are of variable length. Is there any way I can set the first column to shorten itself:
text-overflow: ellipsis;
white-space: nowrap;
while leaving the other columns at their full width to show all the data? I have created a demonstration here: http://jsfiddle.net/Xsanda/uBrV7/
You can do this, but only if you are willing to set a max-width of the cell. The width can't be completely dynamic and still truncated.
http://jsfiddle.net/uBrV7/2/
td:first-child {
max-width: 30px;
overflow: hidden;
text-overflow: ellipsis;
}
You can use max-width: Fiddle
td:first-child {
text-overflow: ellipsis;
overflow: hidden;
max-width: 100px; /* Change this to fit your needs */
}
This question has been asked several times, but none of the answers provided seem to help me:
See this in action here: http://jsfiddle.net/BlaM/bsQNj/2/
I have a "dynamic" (percentage based) layout with two columns.
.grid {
width: 100%;
box-sizing: border-box;
}
.grid > * {
box-sizing: border-box;
margin: 0;
}
.grid .col50 {
padding: 0 1.5%;
float: left;
width: 50%;
}
In each of these columns I have a table that is supposed to use the full column width.
.data-table {
width: 100%;
}
.data-table td {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
My problem is that some of the columns in that table have content that needs to be truncated to fit in the given width of the table. That does not happen, though. I get two tables that are overlaying each other.
Requirements:
Needs to be percentage based. I can't set absolute sizes.
Each rows' height must not grow beyond one text line (which would happen if I remove white-space: nowrap)
Must work in Chrome, Firefox and Internet Explorer 8+
Can't display tables below each other as it has to fit onto one sheet of paper when printing.
What I tried:
inside of and use width and overflow on that. Changed nothing.
"display: table;" on containing div - instead of having two columns the tables were displayed below each other
"table-layout: fixed;" - Forced all columns to have same width
I know that columns 2+3 have a total of 30% of width so I tried to manually set column 1 to 70% - Did not change anything
Zero-width spaces in content - didn't change anything, probably due to white-space: nowrap;
Related Questions:
Table width exceeds container's width
How do I prevent my HTML table from stretching
HTML CSS How to stop a table cell from expanding
Table Overflowing Outside of Div
you need to add the table-layout property:
table-layout: fixed;
also include width=100% in the table HTML tag, not just the style tag.
http://jsfiddle.net/reeK5/
Maybe you'll be interested in a max-width: 0; hack I've discovered.
It has some limits, we should use CSS tables instead of HTML, but it works:
.leftBlock
{
width: 100%;
max-width: 0;
word-wrap: break-word;
overflow: hidden;
}
.rightBlock
{
width: 200px;
max-width: 200px;
min-width: 200px;
}
http://jsfiddle.net/CyberAP/NUHTk/103/
.div {
width:300px;
border:1px solid;
}
.breaked {
word-break: break-all;
}
table{
border:1px solid red;
}
td {
border:1px solid green;
}
<div class="div">
<table>
<tr>
<td>aaaaaaa_________________________________________-sdasd-ad-f-asfas-df-a a-sd-fa-d-ad-fa-ds-asd-a-ads-fa-df-ads-fa-d-fad-f-ad-fad-ad-sa-fda-df-</td>
<td>13</td>
</tr>
<tr>
<td>ddddddddddddd</td>
<td>aa</td>
</tr>
</table>
<br /><hr/><br />
<table class="breaked">
<tr>
<td>aaaaaaa_________________________________________-sdasd-ad-f-asfas-df-a a-sd-fa-d-ad-fa-ds-asd-a-ads-fa-df-ads-fa-d-fad-f-ad-fad-ad-sa-fda-df-</td>
<td>13</td>
</tr>
<tr>
<td>ddddddddddddd</td>
<td>aa</td>
</tr>
</table>
</div>
Measurements on tables work differently. In general, width on a table cell is handled as min-width.
One solution, if you don't mind adding extra markup, is to put a div inside each table cell in which you put the content. Then give this div a width, or a max-width. So
<td>http://www.xxxxxx.xxxxxxx.com/xxx_xxxx/XXXXXXXX/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/XXXXXXXX_xXxxxx</td>
becomes
<td><div>http://www.xxxxxx.xxxxxxx.com/xxx_xxxx/XXXXXXXX/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/XXXXXXXX_xXxxxx</div></td>
and so on.
See updated fiddle: http://jsfiddle.net/bsQNj/4/
Edit: I see the fiddle needs some work - I forgot to put some divs in where they were necessary. But I hope you can work with this idea.
In your CSS:
table {
table-layout: auto;
width: 100%;
}
That should cover all tables
I have <td width="25%"> but if it gets populated with something thats largers than 25% it gets bigger. how can I stop it from getting bigger than 25% with css or html
use the css table-layout:fixed on the table
Found here: http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout
You can use max-width: 25%; to prevent the maximum width from being exceeded; having said that this is a css solution, rather than an html-attribute, so you'd have to use:
<td style="max-width: 25%;">...</td>
Or, better yet, specify in the stylesheet:
td {
max-width: 25%;
}
As #Asherer correctly notes (in the comments) this won't necessarily work in all browsers. To enforce the max-width it might be worth wrapping the contents of the td in a div (or, if they're in-line elements, a span) and applying the max-width to that element.
For example:
<td>
<div>
Cell contents
</div>
</td>
td {
width: 25%;
max-width: 25%;
}
td div {
width: 100%;
overflow: hidden; /* or 'auto', or 'scroll' */
}
This can get a bit messy over time, and I'm not usually a fan of adding unnecessary mark-up, but in this case it does aid the cross-browser compatibility.
you can use the max-width style attribute, and set it to 25%.
td{
max-width:25%;
}
Check this SO thread. It might be useful How to limit a table cell to one line of text using CSS?
Here's some CSS that may help you:
td {
white-space: nowrap;
overflow: hidden;
width: 25%;
height: 25px;
border: 1px solid black;
}
table{
table-layout:fixed;
width: 200px;
}