We have a table as follows:
<table style="margin-top: 10px; float:right;">
<tr>
<td></td>
<td align="right">SubTotal</td>
<td align="right">${subtotal}</td>
</tr>
<tr>
<td></td>
<td align="right">Tax</td>
<td align="right">${tax}</td>
</tr>
<tr>
<td></td>
<td align="right">Total</td>
<td align="right">${total}</td>
</tr>
</table>
The third column should have a fixed interval to the second column no matter how long the value inside it is.
Can anybody give me some suggestion?
There are two ways to go about it:
using padding
using an empty column
It boils down to whether or not it matters if the space is added in between the columns or inside one of them.
padding-right on 2nd column example:
td:nth-child(2) {
padding-right: 30px;
}
padding-left on 3rd column example:
td:nth-child(3) {
padding-left: 30px;
}
empty column example:
td:nth-child(3) {
width: 30px;
}
<table>
<tr>
<td></td>
<td align="right">SubTotal</td>
<td></td>
<td align="right">${subtotal}</td>
</tr>
<tr>
<td></td>
<td align="right">Tax</td>
<td></td>
<td align="right">${tax}</td>
</tr>
<tr>
<td></td>
<td align="right">Total</td>
<td></td>
<td align="right">${total}</td>
</tr>
</table>
IMPORTANT (deprecation notice)
Do NOT use cellpadding.
It has been deprecated in HTML5, along with align, bgcolor, border, cellspacing, frame, rules, summary and width.
Current browser behavior for cellpadding is: disregard if padding has been defined. Which means it will be ignored if the cell element has a defined value for padding anywhere in currently applying CSS.
It is expected to be ignored by all major browsers in the future, regardless of padding value.
If, for any reason, you find yourself needing an obsolete HTML feature to work, you can specify the DOCTYPE attribute accordingly. While it will make the deprecated features work, it might disable more modern features, which were not available in the HTML version you want to use.
Related
I'm trying to design my own website, and I wanted to do a simple crossword puzzle to demonstrate some things about me. Like, every line is a diferrent word, but then there is the "middle" column that spells out another word. Here is an image of basically of what I want to do:
The words are pre-defined by me.
I would like to know the simplest way to do this using only HTML and CSS. I've thinked of using a table, but to make each line shift according to the word, each line would have to be a different table.
I'm not using an image and then putting it on the site, because I want it so everytime the user hovers each word, it shows it's meaning/description on the right/left.
I'm open to using Bootstrap if it helps in anyway.
Any ideas?
Since when do we use tables for layout? Just add 5 divs with a margin-left applied to them and style the nth-child. That way you could even add animation to it if you like.
I think that a table is actually your best bet and that you just need to add extra <td> tags for each empty square. You can make each square the same width by adding td {width: 40px} to the css.
table {
text-align: center;
}
td {
width: 40px;
height: 40px;
}
.letterData {
border: 2px solid #000;
}
<table>
<tr>
<td></td>
<td></td>
<td class="letterData">O</td>
<td class="letterData">N</td>
<td class="letterData">E</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td class="letterData">T</td>
<td class="letterData">W</td>
<td class="letterData">O</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="letterData">F</td>
<td class="letterData">O</td>
<td class="letterData">U</td>
<td class="letterData">R</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td class="letterData">T</td>
<td class="letterData">H</td>
<td class="letterData">R</td>
<td class="letterData">E</td>
<td class="letterData">E</td>
</tr>
<tr>
<td class="letterData">E</td>
<td class="letterData">I</td>
<td class="letterData">G</td>
<td class="letterData">H</td>
<td class="letterData">T</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
I'd say the best way would be to first define a container that represents a square:
.square {
position: absolute;
height: 32px;
width: 32px;
}
You can then position each of these thus:
<div id="square-0" class="square" style="top: 32px; left: 32px;">
A
<div>
<div id="square-1" class="square" style="top: 32px; left: 64px;">
B
</div>
<div id="square-2" class="square" style="top: 64px; left: 64px;">
C
</div>
So long as you position them using top and left values that are exact multiples of the respective height and widths of your div, it should all fit together quite well.
Just an idea but that's how I'd probably do it. Give them sequential id's like square-0 and square-1 and it'll be easier to work with if you decide to expand on it programmatically in future.
My issue is that my anchor exceed table cell on iphone 5 display.
I have this as a style for the cell white-space: nowrap;
For the anchor I just have a background color : background: #f88e1e;
Could you advice please ?
<table class="subscriptionTable">
<thead>
<tr>
<th class="feature"></th>
<th class="free">free</th>
<th class="middle">silver</th>
<th class="top">gold</th>
</tr>
</thead>
<tbody>
<tr>
<td class="feature">linktarget</td>
<td></td>
<td></td>
<td><span class="icon-tick"></span></td>
</tr>
<tr>
<td class="feature">linktarget</td>
<td></td>
<td></td>
<td><span class="icon-tick"></span></td>
</tr>
<tr>
<td class="feature"></td>
<td>
</td>
<td></td>
<td>
<a class="someClass" href="somelink">Free trial</a>
</td>
</tr>
</tbody>
</table>
I've succeeded to let the text be on one line by adding white-space: nowrap
But now the anchor width exceed the cell width. The anchor must stay inside...
Whether display:table-cell (CSS) or actual HTML tables, you can't prevent the immediate contents of a table cell from wrapping. They will always expand to fit the content.
If you want to adjust the contents inside a display: table-cell, you'll need to wrap it in another container element and set a different display type (block/table etc).
I am trying to make an organisational chart in HTML. The code is fairly simple, but I have some problems with the rendering in Chrome/Safari and Opera.
Here is what the result should look like, as it works in Firefox and IE:
Here is in Chrome and Safari
And here is in Opera:
The problem comes from the border-collapse: collapse property in CSS. If I use the old coding style cellspacing="0" cellpadding="0"it works more or less, but is not valid in HTML5.
I created a jsFiddle to show the problem: http://jsfiddle.net/aGVp4/7/
My HTML:
<table cellspacing="0" cellpadding="0">
<tr>
<td colspan="3"></td>
<td colspan="2" class="case"></td>
<td colspan="3"></td>
</tr>
<tr>
<td colspan="3"></td>
<td colspan="2" class="case"></td>
<td colspan="3"></td>
</tr>
<tr>
<td></td>
<td colspan="3" class="right bottom"></td>
<td colspan="3" class="bottom"></td>
<td></td>
</tr>
<tr> <!-- No colspan here, to make the layout symmetrical -->
<td class="right"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="right"></td>
<td></td>
</tr>
<tr>
<td colspan="2" class="case"></td>
<td colspan="4"></td>
<td colspan="2" class="case"></td>
</tr>
</table>
And my CSS:
.orgchart {
border-spacing: 0;
border-collapse: collapse;
}
td {
width: 3em;
height: 1em;
}
td.case {
border: 1px solid black;
}
td.right {
border-right: 1px solid black;
}
td.bottom {
border-bottom: 1px solid black;
}
td.top {
border-top: 1px solid black;
}
The problems seems to be caused by different interpretations of the collapsing border model in browsers. The border conflict resolution is defined in terms of cells, not slots, and when you use colspan=3, one cell spans 3 slots.
The 2nd cell of the 2nd row has a solid bottom border, and the 2nd cell of the 3rd row has no top border. When borders collapse, solid wins none. But the cells are only partially adjacent, as they span different columns. Browsers hand this differently. Chrome makes the border span all the columns of the upper cell, whereas Firefox makes the border span only one column, the one that the cells share – which is more reasonable, but CSS 2.1 seems to leave the issue open.
I tried playing with border: hidden, which helps on Chrome but causes new problems on Opera.
It seems that there are two options. You could use the HTML attributes, if they do the job. Though declared obsolete and forbidden in HTML5 CR, the same document also requires continued support to them in browsers.
But a cleaner, and perhaps more robust, approach is to avoid the problem by adding more empty cells. This means dividing two 3rd row cells into two cells so that only one of them shares a border with the cell of the 2nd row. This makes the table even more grid-like, but not essentially more complex:
<table class="orgchart">
<tr>
<td colspan="3"></td>
<td colspan="2" class="case"></td>
<td colspan="3"></td>
</tr>
<tr>
<td colspan="3"></td>
<td colspan="2" class="case" ></td>
<td colspan="3"></td>
</tr>
<tr>
<td></td>
<td colspan="2" class="bottom"></td>
<td class="right bottom"></td>
<td class="bottom" ></td>
<td colspan="2" class="bottom" ></td>
<td></td>
</tr>
<tr> <!-- No colspan here, to make the layout symmetrical -->
<td class="right"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="right"></td>
<td></td>
</tr>
<tr>
<td colspan="2" class="case"></td>
<td colspan="4"></td>
<td colspan="2" class="case"></td>
</tr>
</table>
Add a new empty row <tr></tr> under the colspan will fix this problem (not a beautiful solution but works).
I played with your jsfiddle, and found a hack to fix the issue in Chrome and Safari.
Also works on FF and IE, but didn't test on Opera.
Try this (jsfiddle):
td.bottom {
border-top: 1px solid white; // this is the hack
border-bottom: 1px solid black;
}
td.right.bottom {
border-top: none; // fix for IE
}
As this is a hack, it may not work as your chart grows complex, but hope this helps in short-term.
I found this topic, mine is related but not the same:
Table rendering with cols and colspan on tds in IE9
The problem I am having is that the 2nd colspan=2 in my table is not being read by IE9, funnily enough it works find in IE7 and IE8, but not IE9. Maybe I've done something completely wrong so here it is:
HTML:
<table id="test">
<tbody>
<tr>
<td>COLSPAN = 1</td>
<td colspan="2">COLSPAN = 2</td>
<td>COLSPAN = 1</td>
<td colspan="2">COLSPAN = 2</td>
</tr>
</tbody>
</table>
CSS:
#test {
width: 100%;
border-spacing: 20px;
border-collapse: separate;
table-layout: fixed;
}
#test td {
position: relative;
background-color: #cccccc;
box-shadow: 3px 3px 2px rgba(0,0,0,0.5);
padding: 10px;
}
jsFiddle: http://jsfiddle.net/DUCPp/1/
What is supposed to happen:
What IE9 gives me:
I am convinced this is a IE9 bug, but I haven't been able to find it on google (maybe I'm not searching the right keywords?). Any solutions or links to bug reports will be greatly appreciated!
UPDATE:
I added an extra column after the 2nd colspan=2 column, and it will render correctly. I have deduced that if the last column in a row has colspan > 1, then it will only be rendered as if colspan = 1.
Any ideas on fixing? I'm now almost positive that this is a IE9 bug <_<
Heh... IE9...
Found a "fix"... idea came from: Colspan on cell in one row seems to prevent setting TD width in all the other rows. Why?
Basically I had to add a empty row with the correct # of empty cells in it:
<table id="test">
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>COLSPAN = 1</td>
<td colspan="2">COLSPAN = 2</td>
<td>COLSPAN = 1</td>
<td colspan="2">COLSPAN = 2</td>
</tr>
</tbody>
</table>
Not pretty... and I needed to remove the padding for the cells in order for it not to display. Sigh...
jsFiddle: http://jsfiddle.net/DUCPp/5/
What you want to do is set the width of columns through TH in the header because that's what the browser will use for determining the width of the table and columns in subsequent rows.
Have a look at the following example:
<table>
<thead>
<tr style="height: 0px;">
<th style="width: 110px; height:0px;"></th>
<th style="width: 160px; height: 0px;"></th>
<th style="width: 210px; height: 0px;"></th>
<th style="width: 110px; height: 0px;"></th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3">Hello</td>
<td>There</td>
</tr>
</tbody>
</table>
You don't appear to have defined any fixed widths for the columns. You should use something like this before the <tbody>:
<col span="6" style="width:16%;" />
I fixed a similar issue by adding the doctype declaration at the start of my HTML code. See http://www.w3.org/QA/2002/04/valid-dtd-list.html
The specific declaration I added was for version 'HTML 4.01 Transitional'.
i.e. placed before the initial tag.
Hope this helps?
Please see below html:
<table style="width: 700px;table-layout: fixed ; margin-top: 30px;" cellpadding="0" cellspacing="0">
<tr class="tableHeader">
<td width="220px">Event Name</td>
<td width="120px">City</td>
<td width="77px">Date</td>
<td width="110px">Price</td>
<td width="80px">Status</td>
<td width="60px">Select</td>
</tr>
</table>
<div style="overflow: auto;height: 360px; width: 730px;">
<table style='width: 700px;table-layout: fixed;' cellpadding='0' cellspacing='0'>
<tr >
<td colspan='6' >adnanpo </td>
</tr>
<tr >
<td width='220px' >adnanpo </td>
<td width='120px' > </td>
<td width='77px' >04/20/2012 </td>
<td width='110px' >USD $30.00 </td>
<td width='80px' >Paid </td>
<td width='60px' >
<input class='orgOkButton' type='button' id='btnOpenOrder' name='btnOpenOrder' onclick='return openOrderWindow('/RealResource/submitorder.aspx?OId=35731&EvtId=771')</td>
</tr>
</table>
</div>
Below part is casuing the issue:
<tr >
<td colspan='6' >adnanpo </td>
</tr>
Please sse the image, the column width is disturbed!! Please help me to fix it!
The obvious solution is to remove the tr element that causes the problem. It does not seem to have a function here. If you just want some spacer there, put a div element between the two tables.
The problem arises because table-layout: fixed tells the browser to decide on column widths according to the first row, if widths have not been set in certain other ways. Here the first row has just one cell that spans all columns, and then the defined behavior is to divide the width evenly between the columns.
Alternatively, set the column widths explicitly, e.g. using
<col width=220>
<col width=120>
etc. right after each <table> tag. But make sure that the sums of the widths add up to the number you set as the total width of the table (they currently don’t). When col elements are used that way to set all column widths, browsers will use those exact widths without questioning (which may cause problems, but I presume you have considered them).
Remove 'table-layout' property in your second table and it will work fine. And close you input element (onclick="return openOrderWindow('/RealResource/submitorder.aspx?OId=35731&EvtId=771')"/>)
If I understand correctly, you are worried to the fact that your columns are not aligning to the top.
Let me first suggest that you use the below CSS:
table { empty-cells: show; }
This will allow the empty cell you have to fill in the space. (otherwise you can just put an in it's blank space).
Also, I suggest you use one continuous table if you can.
Close your input-tag - the > is missing. If the problem is still there we can look further.
Yes this will be the case by using colspan in the "first row" of a table. To get around this you could do something like this (again just for the first row - you can use colspan fine further down):
<tr>
<td width="220px"><div style="position:absolute;width:220px;">adnanpo</div></td>
<td width="120px"></td>
<td width="77px"></td>
<td width="110px"></td>
<td width="80px"></td>
<td width="60px"></td>
</tr>