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.
Related
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.
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;
}
Is there a way using HTML/CSS (with relative sizing) to make a row of cells stretch the entire width of the table within which it is contained?
The cells should be equal widths and the outer table size is also dynamic with <table width="100%">.
Currently if I don't specify a fixed size; the cells just autosize to fit their contents.
You don't even have to set a specific width for the cells, table-layout: fixed suffices to spread the cells evenly.
ul {
width: 100%;
display: table;
table-layout: fixed;
border-collapse: collapse;
}
li {
display: table-cell;
text-align: center;
border: 1px solid hotpink;
vertical-align: middle;
word-wrap: break-word;
}
<ul>
<li>foo<br>foo</li>
<li>barbarbarbarbar</li>
<li>baz</li>
</ul>
Note that for table-layout to work the table styled element must have a width set (100% in my example).
Just use percentage widths and fixed table layout:
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
with
table { table-layout: fixed; }
td { width: 33%; }
Fixed table layout is important as otherwise the browser will adjust the widths as it sees fit if the contents don't fit ie the widths are otherwise a suggestion not a rule without fixed table layout.
Obviously, adjust the CSS to fit your circumstances, which usually means applying the styling only to a tables with a given class or possibly with a given ID.
Using table-layout: fixed as a property for table and width: calc(100%/3); for td (assuming there are 3 td's). With these two properties set, the table cells will be equal in size.
Refer to the demo.
Just put this lines to your table style:
#table_name{
table-layout: fixed;
width: 100%;
}
You have a good example on this codepan.
This is late answer, but it will help for future searches.