I put a link in a table cell, and it didn't work. I tried it with a javascript function to open a window, which I would prefer, but that didn't work either. So I looked around for info and found this SO page: How can I make a link from a <td> table cell.
I tried every method there that seemed applicable, plus some variations on those methods, but none of them worked at all; although I did get a simple demo to work. The suggestion made to me on that page is that something else in my code is causing the problem, which seems likely to me.
I'm putting the code below, and maybe someone can help? I don't care what kind of link it is --- whether the entire cell, or just the words -- as long as it takes me to the desired page.
<table style = "width: 100%; margin-top: 20px">
<tr>
<td>
<a class = "headscript"> Your Communications</a>
<p class = "nextscript"> There is a lot of correspondence blah, blah...
<ul class = "nextscript" style = "list-style-position: inside; margin-left: -20px">
<li>Item 1 text stuff </li>
<li>Item 2 more text </li>
<p style = "border-bottom-height:1px; border-bottom-color: #1E6655; border-bottom-style: inset; "> </p>
<li>Item 3 yet more text</li>
</ul>
</p>
</td>
<td style = "padding-left:20px;">
<a class = "headscript"> Your Cost </a>
<p class = "nextscript"> some text here</p>
<table style = "width: 100%; border-collapse: collapse; table-layout:fixed" class = "nextscript">
<tr>
<td> <b> Your annual revenue</b></td>
<td> <b>Your costs </b> </td>
</tr>
<tr>
<td> Up to $50</td>
<td> $whatever </td>
</tr>
Here is where I want the link -- the code shown is one of the suggestions, but it doesn't work for me:
<tr>
<td style = "padding: 0"> additional charges
<a href="overcharges.cfm">
<div style="height:100%;width:100%"> more info
</div>
</a>
</td>
<td> lots of text here, so this cell is much longer than the one with the desired link
</td
</tr>
(Hoping the above code is correct. Small errors in the tr and td tags don't seem to make a difference, but could be misleading.)
Error is related to element structure. 'P' element can not be child of 'ul'. Others are due to similar tag and scope mismatch.
Just refined the code. It's working here
Blockquote
<body>
<table style = "width: 100%; margin-top: 20px">
<tr>
<td>
<a class = "headscript"> Your Communications</a>
<div class = "nextscript"> There is a lot of correspondence blah, blah...
<ul class = "nextscript" style = "list-style-position: inside; margin-left: -20px">
<li>Item 1 text stuff </li>
<li>Item 2 more text </li>
<li style = "border-bottom-height:1px; border-bottom-color: #1E6655; border-bottom-style: inset; ">Item 3 yet more text</li>
</ul>
</div>
</td>
<td style = "padding-left:20px;">
<a class = "headscript"> Your Cost </a>
<p class = "nextscript"> some text here</p>
<table style = "width: 100%; border-collapse: collapse; table-layout:fixed" class = "nextscript">
<tr>
<td> <b> Your annual revenue</b></td>
<td> <b>Your costs </b> </td>
</tr>
<tr>
<td> Up to $50</td>
<td> $whatever </td>
</tr>
<tr>
<td style = "padding: 0"> additional charges
<a href="overcharges.cfm">
<div style="height:100%;width:100%"> more info
</div>
</a>
</td>
<td> lots of text here, so this cell is much longer than the one with the desired link
</td>
</tr>
</table>
</td>
</tr>
</table>
working example here
https://jsfiddle.net/aman9753/jya5L1t5/
Related
I'm having a bit of a problem putting together a HTML email which will render properly in outlook, i had initially got everything working fine through the use of list items and the list-style-image Property, but that isn't supported in outlook.
Basically, i have a table with 2 rows in it, the left hand side one has an 11pixel image being using as a custom bullet point, and on the right hand side is some text.
My problem is no matter what i do i cannot get the column on the left to maintain an 11 pixel width, the columns ALWAYS split equally down the middle of the table. Help please?
HTML
<table>
<tr>
<td>
<img src="Small Image" />
</td>
</tr>
<tr>
<td class="red">
<h4>
TEXT
</h4>
</td>
</tr>
<tr>
<td class="webinar">
<table>
<tr>
<td class="left">
<img src="/Bullet.png" />
</td>
<td class="right">
<p>
TEXT
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
CSS
td.webinar .left {
width:11px;
vertical-align:top;
padding:0px
margin:0px
}
td.webinar .right {
width:144px;
vertical-align:top;
padding:0px
margin:0px
}
td.webinar {
background-color:#ccc6d2;
border:1px solid #313131;
padding-top:8px;
padding-bottom:10px;
}
you want to use css styles in emails? then you are going to have a bad time in most clients..
try to:
<table>
<tr>
<td width="144px">
<img src="Small Image" />
</td>
</tr>
</table>
in email templates you should always apply inline styling as "oldschool" as possible!
I am creating a newsletter template with full CodePen example
I have a few Table rows as follows:
<tr>
<td class="snip" valign="top">
<table class="snip" style="padding-left: 8px;">
<tr>
<td>
<img src="http://placehold.it/40x32" style="padding: 4px">
</td>
</tr>
<tr>
<td>
THIS IS THE TITLE 1
</td>
</tr>
<tr>
<td>
<span>THIS IS THE LINK 1 FOR TITLE 1</span>
<br>
<span>THIS IS THE LINK 2 FOR TITLE 1</span>
<br>
<span>YET ANOTHER LINK FOR TITLE 1</span>
<br>
<span>ONE MORE LINK FOR TITLE 1</span>
<br>
<span>AND THE LAST LINK FOR TITLE 1</span>
</td>
</tr>
</table>
</td>
</tr>
Somehow when I resize the browser to a specific width I get:
You can see that the last TD goes to a next row ...
How can I solve this problem? I can't find the solution ...
look this, I set two different tr with class
http://codepen.io/anon/pen/iyEmK
#media only screen and (max-width : 600px) {
tr.myTR {float:none;display:block;clear:both} }
Use min-width instead of width
table[class="snip"] {
min-width: 50% !important;
}
http://codepen.io/anon/pen/dzGKo
You can add
td[class="snip"]:nth-child(2n+1) {
clear: left;
}
so that the narrow screens have rows of two elements.
Demo at http://codepen.io/gpetrioli/pen/lbxEe
I've the below HTML Code.
<div class="main">
<div class="para">
<a name="I1-87A"></a><span class="phrase">I1/87A</span> <span class="font-style-bold">Punitive costs</span>—Proceedings which are an abuse of process in that they
are scandalous or vexacious or have been initiated maliciously or for an ulterior
motive may not only be struck out, the petitioner may also face an order to pay
costs on an indemnity basis (<span class="font-style-italic">Re Tang Hong Yuen, ex p.
Leung Yee Cheung</span> [2004] H.K.E.C. 972 <span class="font-style-italic">Bank of
China (Hong Kong) Ltd v. Lee Lin Heung</span> [2002] 1 H.K.L.R.D. A3 and
<span class="font-style-italic">Choy Yee Chun v. Bond Star Development Ltd</span>
[1997] H.K.L.R.D. 1327). This provides a salutory reminder to practitioners that
the bankruptcy jurisdiction should not be lightly invoked nor looked to for the
determination of disputes between parties.
</div>
<table class="frame-all" colsep="1" rowsep="1" align="left" cols="3">
<colgroup>
<col class="colname-c1 colwidth-8.80%"></col>
<col class="colname-c2 colwidth-12.68%"></col>
<col class="colname-c3 colwidth-59.33%"></col>
<col class="colname-c3 colwidth-19.19%"></col>
</colgroup>
<tbody>
<tr>
<td class="null"><div class="para"><a name="I1-89"></a>
<span class="phrase">I1/89</span>
</div>
</td>
<td>
<div class="para">
<span class="font-style-bold">Stages of a voluntary arrangement</span>
</div>
</td>
<td rowspan="align-center">
<div class="para">
<span class="font-style-bold">Procedures</span>
</div>
</td>
<td>
<div class="para">
<span class="font-style-bold">of the Bankruptcy Ordinance (BO)/Rule of the Bankruptcy Rules (BR)/Form in the Bankruptcy (Forms) Rules (BFR)</span>
</div>
</td>
</tr>
<tr>
<td class="null"><div class="para"><a name="I1-89A"></a>
<span class="phrase">I1/89A</span>
</div>
</td>
<td>
<div class="para">
<span class="font-style-bold">Debtor prepares proposal</span>
</div>
</td>
<td>
<div class="para">The proposal should include:</div>
</td>
<td>
<div class="para">
<span class="font-style-bold">BR 122B and C</span>
</div>
</td>
</tr>
<tr>
<td class="null"><div class="para"><a name="I1-89B"></a>
<span class="phrase">I1/89B</span>
</div>
</td>
<td>
<div class="para">
<span class="font-style-bold">Notice to intended nominee</span>
</div>
</td>
<td>
<div class="para">Written notice of the debtor’s proposal and a copy of the proposal is passed to the intended nominee or a person authorised to take delivery on his behalf (BR 122D (1) and (2)). If the nominee agrees to act, he shall cause a copy of the notice to be endorsed to the effect that it has been received by him on a specified date (BR 122D(3)). The copy of the notice shall be returned by the intended nominee to the debtor (BR 122D(4)).</div>
</td>
<td>
<div class="para">
<span class="font-style-bold">BR 122D BFR 167 </span>
<span class="font-style-italic">[Notice to Intended Nominee]</span>
</div>
</td>
</tr>
<tr>
<td class="auto-style1">
<div class="para">
<a name="I1-89C"></a>
<span class="phrase">I1/89C</span>
</div>
</td>
<td class="auto-style1">
<div class="para">
<span class="font-style-bold">Application for an interim order</span>
</div>
</td>
<td class="auto-style1">
<div class="para">An application for an interim order may be made when the debtor intends to make a proposal and the proposal must provide for a nominee to act in relation to the voluntary arrangement for the purposes of supervising its implementation (BO 20A). Two or more persons can be appointed as joint nominees in a voluntary arrangement. The court normally will not object to any proposal to appoint solicitors and certified public accountants provided such persons are able to demonstrate sufficient experience and knowledge in dealing with insolvency matters. For persons not coming from these two professions, a more cautious approach will be taken (see <span class="font-style-italic">Re Ng Hing Kwong</span> [2003] 3 H.K.L.R.D. 230).</div>
</td>
<td class="auto-style1">
<div class="para">
<span class="font-style-bold">BO 20A BFR 165 </span>
<span class="font-style-italic">[Application for Interim Order]</span>
</div>
</td>
</tr>
<tr>
<td class="null"><div class="para"></div>
</td>
<td class="null"><div class="para"></div>
</td>
<td>
<div class="para">An application for an interim order may be made by:</div>
</td>
<td class="null"><div class="para"></div>
</td>
</tr>
</tbody>
</table>
</div>
here, i want to hide the first cell by using a css attribute and set the number in table first cell equal to the number in the para above. please refer the below screenshot.
There is a gap between the number start and also there is an extra cell(for which i gave class as 'null'), it should be hidden please refer to my second screen shot. please let me know how i can do this.
JsFiddle is here
you can modifie your css like this :
.main{
margin-left: 5.0em;
margin-right: 0.2em;
}
table.frame-all{
width: 97%;
border-collapse: collapse;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 2em;
padding: 10px 10px 10px 10px;
}
.frame-all td {
border: 0.080em solid;
padding-right: 0.4em;
padding: 7px 7px 7px 7px;
}
td.null {
border:none; !important
}
.para span.phrase {
text-indent: 0em;
font-weight: bold;
}
you may need some "adjustment", but it seems to be what you need.
Padding properties caused the gap between first row, and dates, also, i used "border : none;" on this first column to hide the border around the date. (it exist but you don't see it)
I Hope it may help you,
Best regards
I'd like to have HTML that looks like this:
we already know that: 2*1 = 2
2*2 = 4
2*3 = 6
(i.e., the numbers are aligned as in a column)
I could use a table, or maybe text-indent.
I'd like to know other options, and what, if any, is "the right way".
My Two cents for a more semantic, non-table solution:
<div class="content">we already know that:</div>
<div class="math">
<div class="eq">
<span class="operand">2</span><span class="operator">*</span><span class="operand">1</span><span class="operator">=</span><span class="result">2</span>
</div>
<div class="eq">
<span class="operand">2</span><span class="operator">*</span><span class="operand">2</span><span class="operator">=</span><span class="result">4</span>
</div>
<div class="eq">
<span class="operand">2</span><span class="operator">*</span><span class="operand">3</span><span class="operator">=</span><span class="result">2</span>
</div>
<div class="eq">
<span class="operand">2</span><span class="operator">*</span><span class="operand">300</span><span class="operator">=</span><span class="result">600</span>
</div>
</div>
.content {float:left;}
.math {float:left;}
.math .operand {width: 3em;display: inline-block; }
.math .operator {padding-left: 5px; padding-right:5px }
.math .result {font-weight:bold; text-align:right;width:3em;display: inline-block; }
However, having seen the extra markup and reviewing what you have I think a table is actually your best solution. You have a table of data with 5 columns, two operand columns, two operator columns and one result column.
http://jsfiddle.net/vnMM2/
UPdate Table Version (quick and dirty conversion)
<div class="content">we already know that:</div>
<table class="math">
<tr class="eq">
<td class="operand">2</td>
<td class="operator">*</td>
<td class="operand">1</td>
<td class="operator">=</td>
<td class="result">2</td>
</tr>
<tr class="eq">
<td class="operand">2</td>
<td class="operator">*</td>
<td class="operand">2</td>
<td class="operator">=</td>
<td class="result">4</td>
</tr>
<tr class="eq">
<td class="operand">2</td>
<td class="operator">*</td>
<td class="operand">3</td>
<td class="operator">=</td>
<td class="result">2</td>
</tr>
<tr class="eq">
<td class="operand">2</td>
<td class="operator">*</td>
<td class="operand">300</td>
<td class="operator">=</td>
<td class="result">600</td>
</tr>
</table>
.content {float:left;}
.math {float:left;}
.math td { text-align:right}
.math .result {font-weight:bold }
http://jsfiddle.net/vnMM2/2/
Use a <pre> tag. Quote from w3Schools:
Text in a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks.
Or if that is not an option for you, you can use CSS to set any element to preserve white space by adding white-space: pre; .
I am little confused. I am not sure, I may answer you properly.
If you want to have the Superscript, follow this code:
"2 <sup>1</sup> = 2
2 1 = 2
2 2 = 2
Likewise.
See jsfiddle here
The selector highlights all tables rather than the one it should be selecting. It only does this for the first list item. If I move selected="selected" to another list item, I don't have the issue. I don't see this issue in ff for ie.
Am I doing something wrong, or is this a new bug?
css
li[selected="selected"] table
{
background:yellow;
}
html
<li selected="selected">
<a href="#">
<table>
<tr>
<td>
Row 1 - Col 1
</td>
<td class="second">
Row 1 - Col 2
</td>
</tr>
</table>
</a>
</li>
<li>
<a href="#">
<table>
<tr>
<td>
Row 2 - Col 1
</td>
<td class="second">
Row 2 - Col 2
</td>
</tr>
</table>
</a>
</li>
<li>
<a href="#">
<table>
<tr>
<td>
Row 3 - Col 1
</td>
<td class="second">
Row 3 - Col 2
</td>
</tr>
</table>
</a>
</li>
I think the answer is that selected is not a valid attribute for an <LI> tag. Chrome is (right or wrong) simply ignoring that element in your CSS.
If you used class instead, then you could select it correctly in all browsers: http://jsfiddle.net/SReUe/
Have you tried making your selector a little more specific?
EG: li[selected="selected"] table td