Here is a page that I have a problem with:
http://musdesigns.com/invoice/guest/view/invoice/3810b25e7b5c22afe2a33a16974732f4
As you can see, the item name field has a huge margin on the right.
Any idea how to fix this?
I would like it to have a small margin similar to the other fields.
You have to provide specific width for the second "td(column)" or do it for all.
If wish to do only for second "td(column)", then you can do like this also.
<td style="width: 40%;">Item</td>
or
table td:nth-child(2){width:100px;}
or make a class and provide it width and place it on every td
On your <th>Item</th> you can set the width using CSS.
Like:
<th style="width: 40%;">Item</th>
Related
I'm having a stupid issue using a table, I hardly ever use tables and I'm not sure why the first image has a huge space after it. I tried setting a width, using "-margin" & Padding. I cant find anything to reduce the size.
<tr class="tblpadding">
<td>Character:</td>
<td class="tdchar"><img src="http://www.xronn.co.uk/pokearena/assets/img/charcter/2.gif"></td>
<td><img src="http://www.xronn.co.uk/pokearena/assets/img/charcter/2.gif"></td>
<td><img src="http://www.xronn.co.uk/pokearena/assets/img/charcter/2.gif"></td>
</tr>
Best to see the fiddle to show the issue - http://jsfiddle.net/uh6j4/1/
Because the column cell has larger width because of the input type text boxes, just add colspan to that cell
Demo
Also, I just saw that you've inconsistent table cells in your
example, so make sure you fix them according to your requirement.
But as far as the explanation goes, you need to use colspan on the column which will contain those images.
Also I would like to point this out, it's invalid to use form element nested as a tr direct child, you should use that inside a td, always validate your markup here before you put your websites live... but as far as the idea goes, the signup form you are trying to build can be designed without tables..
actually, you should not be using table for creating a layout in the first place.
use div's instead.
to give the organized look that you have here, what you need to do is very simple use min-width on the labels for uniformity.
I've created the same look that your table have , using div's only.
if its the same, why bother? because my layout have a flexibility that yours dont have.
take a look here: http://jsfiddle.net/avrahamcool/uh6j4/7/
Please take a look at this fiddle: http://jsfiddle.net/d3uc9/4/
I have a problem with this, as the two divs, in a table, next to each other, are not on the same margin line, even thought they share the same css class etc.
What have I done wrong in the example, and must I change to make them on the same margin-top line?
Thanks, I have tried to be as clear as possible.
What I mean is that they should share the same margin-top line, but they don't, and what must I do to fix this?
You just need something like:
td { vertical-align: top;}
Example fiddle
This says that the content of a table cell is aligned to the top of the cell rather than to the middle. This is needed because your left hand div is not as big as the one on the right.
Also I notice that you are duplicating ids several times in your HTML (eg <div id="stylized" class="myform">). This is not valid HTML and can potentially cause unexpected behaviour in browsers. IDs must be unique and if you want to identify multiple elements in the same way for style purposes then you should use classes.
eg.
<div class="stylized myform">
Just add to your css:
td {vertical-align:top;}
Adding valign="top" will make the column on the left align to the top of the row.
The problem is the vertical alignment of the table. The easiest way to fix it is to add valign="top" to either the <tbody> or <tr>. You could also do it through css by specifying vertical-align:top for the <tr>.
I have a table like this:
<table>
<tbody>
<tr>
<td>someArg:String</td>
<td>–</td>
<td>This is a description about this argument.</td>
</tr>
</tbody>
</table>
The table is set to 100% width using CSS and is dynamic based on the browser width.
When the third cell has a small amount of content, the first cell will all be on one line. However, when the third cell contains a lot of content, the first cell will crumple up and may look like this:
someArg:
String
I want to ensure that the content of the first column always stretches its cell to fit perfectly (for the widest first cell in the table obviously, not individually).
From here I just want the final cell in the row to use up the remainder of the table's 100% width.
How can I achieve this?
Here is a fiddle for more explanation: http://jsfiddle.net/8CHMv/
I would add a class to the td that you want to be one line and add
.myClass{
white-space:nowrap;
}
Add the nowrap element to your HTML TD tag.
<td nowrap="nowrap"> from http://www.w3schools.com/tags/att_td_nowrap.asp
Perhaps set the white space: nowrap property in CSS in the first to as a CSS class?
Details on the nowrap here http://www.w3schools.com/cssref/pr_text_white-space.asp
There are two ideas:
If the content of the first column is almost the same, just give a fixed width to the first column. and leave the third column have no width set.
If the content of the first column has big difference, set
white-space: nowrap;
with css to it.
I have some table headers like:
<table>
<tr>
<th>
Invoice Number
</th>
<th>
Invoice Date
</th>
...
I'm wanting to get the different words on different lines in the headers so I did this:
<table>
<tr>
<th>
Invoice<br />Number
</th>
<th>
Invoice<br />Date
</th>
...
This works but I'm unsure if it obeys best practises. I have heard on a webcast that you shouldn't really use <br /> anymore and shouldn't use tags to format what your output looks like but should use css so you can change it more easily.
Can anyone suggest a better way to do this?
You could code it as:
<table>
<tr>
<th>
<div>Invoice</div><div>Number</div>
</th>
<th>
<div>Invoice</div><div>Date</div>
</th>
...
Although frankly, I see nothing wrong with that use of the <br /> tag.
You can set the width for all of your table headers with this:
th {width: 60px;}
or you can assign a class so you just make some of them more narrow:
th.narrow {width: 60px;}
You can adjust the font size and width as necessary.
Just a side note: don't forget to add scope for accessibility. If the data is below your header cells then use
<th scope="col">
and put the th in a thead section and the td cells in the tbody section. If your header cells are on the left side of the table and the cells related to those headers are to the right, then use
<th scope="row">.
You could try putting a div inside the th with a specific width and height style to force the second word down.
You could set word-spacing to a sufficiently too-large size. Personally I would probably just let it not wrap.
I was expecting to be able to find a CSS property specifically for forcing breaking on white space, but didn't (upon a cursory search). In case your eyes are better than mine: http://w3.org/tr/css3-text/
In a table of mine I have the table header, th which have two separate links in each cell. Each of them wrap to a new line which I don't want. If I remove all the style sheets it doesn't fix it. If i disable style sheets in the browser it fixes it but there are no inline styles that would cause the wrapping. If they are non-hyperlinked words they don't wrap. If I use the td tag it doesn't fix it either. There is too much code all over the shop to post but all I want is in a th cell a word with an image next to it with a different hyperlink.
Here is a quick bit of code. Although doing nowrap does work in this quick look it doesn't work in the actual code for some reason.
<table>
<tr>
<th>Time:</th>
<th style="width: 8%">
V505(2)
<img src = "images/information.png" width = "25" height = "25" border = "0"/>
</th>
<th>Time:</th>
</tr>
</table>
Any reason why you can't do a white-space: nowrap;?
Have you tried setting the width to a measure instead of a %? With no width specified on the Table, the browser might not be sure what 8% means (unless of course, these are specified in some styles).