I have a Fixed size table and I have to show the data in a td. The Issue is If I enter the Data with spaces then UI is appearing Perfect because in td data adjust in new line but if i entered 20 characters without space then my UI got disturbed. Any help will be appreciated. I have tried so many option but no one can help, like:-
<td width="200"></td>
and
table-layout: fixed;
width: 100px;
You can use word-break:break-all; on your td example here - JSFiddle
Browser support for word-break - Can I Use
You should give "word-wrap: break-word;" a try.
Related
I have a website with a table and for some reason that I cannot find for the love of god, the last item of the table row is wider than previous items. Here is a link to see what I mean. However, it only does that on some pages. Most pages are completely fine. Here is an example of what its supposed to look like this.
The code is the same on every page and I do not quite understand why it does that because the 'inspect element' gives me that the width of the table element is the same. However, it clearly is not. Please check it out and let me know where to start looking.
The below content in one of the bottom rows is causing the issue -
СК-201(М),231(М),251(М),351(М),501(М)
Its in the 5th row from bottom.
Add space after comma to solve the issue.
some time data come from data store and you cant hanld this with adding space in the table when long words comes in then td width should extend its simple to solve this issue in css add this line for you td css
word-break: break-all;
your css will be look like
.catalog_items_blocks td {
padding: 10px 0 38px 41px;
width: 179px;
word-break: break-all;
}
now words breaks when cross the td width
thanks
I created a invoice table
but on the top where it says:
RUC N° 20516223163
INVOICE
N° 001- 0004
Is not showing in the middle and more bigger to the left because this is taking 2 spaces
<th class="smal"colspan="2">DESCRIPTION</th>
Here is the demo:
http://jsfiddle.net/g78q9/27/
I'm doing this image
Please somebody can help me?
If I understood what you want, try this changes:
Increase your colspans by "1" on the trick td, and on all Descriptions tds.
Also, to prevent the Nº of breaking to the next line, add white-space: nowrap the the td.trick class.
Here's the updated fiddle: http://jsfiddle.net/g78q9/29/
in your td css you have to change to % not px
td.trick {
width: 40%;
you have to change like this and it will show like you want, hope helped you :-D
I've got a table in which every th has the following style:
width: 100px;
max-width: 100px;
And everything would be ok but one td has a long e-mail adress without - and the th is more than 100px width. Is there any way to force tds to get the max-width from their corresponding ths?
EDIT:
jsFiddle:
http://jsfiddle.net/CX7T9/
If you are free to add styles to tds, you can apply all styles related to with, from tds to ths, plus add word-break:break-all; Read more here
I have edited your fiddle http://jsfiddle.net/CX7T9/1/
Want to start off by saying I have tried this method with no success, it could be because I am doing it wrong idk...
So I have a 7 column table and my issue is that my 2nd column (TX4200) does not have a colspan but the width of that column seems to be bigger than I would like and as a result the other columns are suffering. I am thinking because of the type of layout my table has the auto-width algorithm is having some issues, so I want to try and take this on by brute force.
Things I have tried
table-layout: fixed
Setting the table width: 1000px; but even then the TX column still takes up the most space
min-width & max-width didn't do anything
Here is my fiddle http://jsfiddle.net/8Xy24/1/
Any help is much appreciated! Thanks in advance.
You likely want to look at setting either the overflow to hidden or word-wrap to break-word in conjunction with the max-width for the cells in question depending on the kind of behaviour you want.
There you go:
http://jsfiddle.net/8Xy24/2/
I just added a td width:
td {
width:50px;
}
On our site we have tables containing data. We like the column widths we get with a normal table, but we like the border-bottom of tds to stretch the entire width of the page like we get with CSS: table { width:100% }, as can be seen on a demo table widths page, which renders like this:
Is it possible to achieve the same column widths as with a normal (non-width-100%) table in a table where the border-bottom stretches the entire width?
And no, td { white-space: nowrap } in combination with an extra width: 100% td (see the link above) is not good, as sometimes the tds are long and so we want the tds to wrap exactly like in a normal table.
We need a solution that works in at least IE6-8 + FF.
Btw, is there a better way (tm) of showing HTML snippets than linking to an external page? I can show just source, but having HTML rendered too is very illustrative.
This was originally posted on Webmasters, but following a suggestion there, I now (re)post it here.
I finally figured it out.
My first few attempts dealt with floating <td>s and <tr>s, but apparently I was on the right track but had the wrong element.
I think what you want to do is to float the <tbody>. The <table> will still be 100% width, so it will stretch the whole width of the page, but the <tbody> inside of it will act as a container for everything else, and floating it will release it from the shackles of the size of its <table> container width.
The downside of this is that you won't be able to use <thead> or <tfoot> elements, because you will no longer have any way to align them with the <tbody> content.
Try this out:
table {
width: 100%;
border: 1px #000 solid;
}
tbody {
float: left;
}
td {
border: 1px #000 solid;
}
You can use the new CSS properties min-width and max-width to bound the columns sizes without setting them explicitly.
To get a proportional version of what would be rendered when the table's width is not specified, I think you'd have to let it render normally (remove your table width setting) and then use javascript to read the column widths and resize.
Pulled this example of using jQuery to syncronize the column widths of two tables from another question:
$("#t1").width($("#t2").width());
$("#t1 tr td").each(function (i){
$(this).width($($("#t2 tr:first td")[i]).width());
})
Should be a pretty good starting point for scaling your column widths.
This is pretty ugly and not exactly what you asked for, but it works in Firefox and appears to get the same gist...
<html>
<head>
<style type="text/css">
td{background-color:blue;}
div{border:1px solid red;position:absolute;width:100%;}
</style>
</head>
<body>
<table>
<tr>
<td>asdf<div></div></td><td>hello blah blah</td>
</tr>
<tr>
<td>lorem ipsum dolor si amet</td><td>testing</td>
</tr>
</body>
</html>
I was looking for a similar answer to this question, however I don't understand what you mean by
And no, td { white-space: nowrap } in combination with an extra width: 100% td (see the link above) is not good, as sometimes the tds are long and so we want the tds to wrap exactly like in a normal table.
But anyway, I found a solution to my problem. Not sure if it can be used here, but it solved my problem. Maybe it can be helpful to others.
I didn't add in another td. I just applied 100% to every last td with content.
So I could add a class to every last td to do that, or I could use the last-child selector to do it for me.
Something like:
table
{
width:auto;
}
table tr td:last-child
{
width:100%;
}