I have a table that needs to stretch 100% of the page. The first column is set up with an ellipsis on the text content for when the browser is resized. It works, but there is a blank 200px block to the right of the table cell (the width is determined from my CSS width calc of 100% - 200px).
.ff_table {
width: 100%;
}
.ff_table_td1 {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: calc(100% - 200px);
}
.ff_table_td2,
.ff_table_td3 {
width: 100px;
}
<table class="ff_table" border="1">
<tr>
<td class="ff_table_td1">thequickbrownfoxjumpsoverthelazydogtwice</td>
<td class="ff_table_td2">thequickbrown</td>
<td class="ff_table_td3">thequickbrown</td>
</tr>
</table>
I tested it and i realised what your problem was.
Remove the spaces from width: calc(100% - 200px);
width: calc(100%-200px);
the spaces mess with the css.
However, this still allows for 100% of your cell length, hence you dont see the ellipsis. Change the width to 90% and you will see that its still there.
Therefore, you'll need something called a media query in ur css.
#media all and (max-width: 480px) {
.ff_table_td1 { width:200px; }
}
This allows you to change the widths of the columns when your browser is below a certain width. You may put any condition you wish in there.
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;
}
Given below an HTML table.
.panelgrid {
table-layout: fixed;
width: 100%;
max-width: 500px;
word-wrap: break-word;
}
<table class="panelgrid" rules="all" border="1">
<tr>
<td>Id</td>
<td>1</td>
</tr>
<tr>
<td>Value</td>
<td>Loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text.</td>
</tr>
</table>
The style given makes word-wrap occur, when the text entered into the table cells exceeds the specified max-width: 500px; property.
What does not happen is when the width of the text is smaller than the max-width property, the table should automatically fit according to the width of the text which does not happen.
The table width stays at 500px even though in case, the text length is smaller than 500px.
How can it be achieved so that the table automatically shrinks, when the text length is smaller than the specified length (500px in this case)?
Currently the above CSS is just like,
.panelgrid {
table-layout: fixed;
width: 500px;
word-wrap: break-word;
}
You will need to add a containing block element (table is not a block element) and use max-width on that to constrain the width.
<div style="max-width:500px;">
<table>
...
</table>
</div>
See also this SO answer
min-width/max-width on no-block elements
Change your css to this instead: http://jsfiddle.net/3b5aa3qq/
.panelgrid td{
max-width: 400px;
word-wrap: break-word;
}
Remove the length of the "Long" word to see it shrink. You can also give it a padding to look more beautiful
you can set a table width of auto, and keep your max width of 500px. Then set word-break to break-all
width:auto;
max-width:500px;
word-break:break-all;
demo is here.
Instead of using max-width or width try using min-width
.panelgrid {
table-layout: fixed;
max-width: 500px;
-ms-word-break: break-all;
word-break: break-all;
// Non standard for webkit
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
Try this. Worked for me on jsfiddle.
The other two answers are correct. Using max-width will make the div be as small as possible, while still being large enough to fit whatever content you put into it. Using width will make the div always be that specific pixel size, no matter the content that it holds.
I have the following table:
<table>
<tbody>
<tr>
<td colspan="2">
<img src="http://www.sherv.net/cm/emoticons/cats/cat-headphones-smiley-emoticon.gif" />
<img src="http://www.beaukit.com/catgrpbl.jpg" />
</td>
</tr>
</tbody>
</table>
and the following CSS:
table {
width: 40%;
background-color:grey;
text-align: center;
margin-bottom: 20px;
}
img {
max-width: 100%;
margin: 0 0 0.8em 0;
max-height: 800px !important;
width: auto !important;
height: auto;
}
See Jsfiddle
What I want is that the pictures in the cell fill its width if they are bigger than the cell itself. In case the pictures are smaller, they should keep maintain their native width expressed via max-width. This seems to work well in Chrome, but when I try it in firefox the bigger pictures stretch the width of the cell.
While, if I change the width of the images to: width: 100% !important;, the smaller picture are streched to fill the cell (see table.two).
How can I solve the issue?
try adding
table {
table-layout:fixed;
}
Table cells don't behave like block elements, their widths and heights are defined by the content inside them. From the I.E. documentation:
auto: Default. Column width is set by the widest unbreakable content in the column cells.
fixed: Table and column widths are set either by the sum of the widths on the col objects or, if these are not specified, by the width of the first row of cells. If no width is specified for the table, it renders by default with width=100%.
You have use width auti !important which you should not be to
table tr, table tr td{
width:100%
}
table tr td a{
width:100%;
display:block;
}
img {
width: 100%;
}
Check on Fiddle
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;
}