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
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
Have a table set up, with a table nested in most of the cells, basically a pyramid matrix type structure. Issue i'm having is the cell borders don't line up and in some cases double up, so i'm a little confused as how to fix it, having already used border specific values, ie, border-bottom and border-right, etc.
Codehttp://jsfiddle.net/WgRs6/5/
PS: I'm new to this so not sure how to post the CSS and HTML like in other user posts, where they're boxed in and you can scroll through, so just attached the
The problem was that you had a padding set..
So, remove the padding for the <td>
Kindly check this fiddle
I,ve added
td{
padding:0;
}
to your css
UPDATE
See the fiddle
I've found out the problem in your code..You used several tables inside a <td> which created such a problem.In my fiddle i've done the whole thing with just one table using rowspan and colspan.Check it..
I'm sorry that i accidentally mis placed your table values while copy pasting and because it took a lot of time i was not able to complete the html.So kindly follow the same procedure inorder to generate the full table..
Just set the td padding to 0px:
td{
padding: 0 !important;
}
http://jsfiddle.net/WgRs6/7/
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.
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;
}
I am debugging one tricky alignment problem. Here is the jsfiddle. The problem is that the Rating "Thumbs" Up & Down are present in a single image. I am using background-position to generate different images.
The visual looks is looking well, but I need to show all four features in one line with background images along with them.
Does anyone know how to fix it ?
Ok from what I think I understand you want to have your rating class in a seperate span to the actual text in the li.
<li><span class="rating up"></span>Courteous Staff</li>
Then set the span to display: inline-block; and you should get what I think you're after.
http://jsfiddle.net/spacebeers/U2Wax/35/
You need to do a bit more work to get it aligned right but it will give you a good idea.
have you tried adding this css style?
white-space: nowrap;