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
Related
want to display the following:
where the "..." button in the first row (Web Project) is completely right-aligned to the red line (with a little padding to it)
where the Input field in the 2nd row (Root Namespace) is filling up the space to the right until the red line (with a little padding to it)
where the 2 buttons in the 3rd row (Connection String) are completely right-aligned to the red line (with a liddle padding to it).
I have tried the following but it does not do it correctly - and it only works with a certain width - If I increase or decrease the width, things are getting ugly:
decreasing the width:
My current HTML looks like this:
<div id = "ProjectSelector" width = 100%>
<table width = "100%" style = "padding-bottom: 10px;">
<tr>
<td style="white-space: nowrap; width: 140px;">Web Project (.csproj)</td>
<td style="width: 99%;" ><input id = "webproj" style="width: 97%"/><button id="webproj_browse">...</button></td>
</tr>
<tr>
<td>Root Namespace</td>
<td style="width: 99%;"><input id = "rootnamespace" style="width: 99%"/></td>
</tr>
<tr>
<td>Connection String</td>
<td style="width: 99%;"><select id = "connectionstring" style = "width: 87%"></select><button id="newConnection">New Connection</button><button id="connstringDelete">Delete</button></td>
</tr>
</table>
</div>
Question: How to format the table and the content of 2nd column to accomplish this properly?
the title of your question describes a typical flex behavior. You may use inside your table a flex container :
.flex {
display: flex;
}
.flex-1 {
flex-grow: 1;
}
<div id="ProjectSelector" width=1 00%>
<table width="100%" style="padding-bottom: 10px;">
<tr>
<td style="white-space: nowrap; width:0;">Web Project (.csproj)</td>
<td>
<div class="flex"><input id="webproj" class="flex-1" /><button id="webproj_browse">...</button></div>
</td>
</tr>
<tr>
<td>Root Namespace</td>
<td>
<div class="flex"><input id="rootnamespace" class="flex-1" /></div>
</td>
</tr>
<tr>
<td>Connection String</td>
<td>
<div class="flex">
<select id="connectionstring" class="flex-1"></select><button id="newConnection">New Connection</button><button id="connstringDelete">Delete</button></div>
</td>
</tr>
</table>
</div>
It can also be build with grid or flex without a table.
For infos & demo , an example mixing grid and flex, i would probably not use this HTML structure H + P at first :
* {
margin: 0;
}
.flex {
display: flex;
}
.flex-1 {
flex-grow: 1;
}
#ProjectSelector {
display: grid;
grid-template-columns: auto 1fr;
grid-gap: 0.25em;
;
}
p {
grid-column: 2;
}
<div id="ProjectSelector">
<h4>Web Project (.csproj)</h4>
<!-- title that matches your structure or else can be plain text -->
<p class="flex"><input id="webproj" class="flex-1" /><button id="webproj_browse">...</button></p>
<h4>Root Namespace</h4>
<p class="flex"><input id="rootnamespace" class="flex-1" /></p>
<h4>Connection String</h4>
<p class="flex">
<select id="connectionstring" class="flex-1"></select><button id="newConnection">New Connection</button><button id="connstringDelete">Delete</button></p>
</div>
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/
I am trying to make the following working the way I want it to. I want to have an Input element changing its width to the provided cell's width. Here is code:
<table style="margin-top:10px;width:80.5%;font-size:14px">
<tr>
<td style="text-align:left;width:5%">
<span translate>CaseNumber</span>:
</td>
<td style="text-align:left;width:5%">
<span>
<input easyui-textboxreadonly readonly ng-model="caseid" style="width:80px;height:32px;background-color:#72A4D2"/>
</span>
</td>
<td style="text-align:left;width:2%">
<span translate>Title</span>:
</td>
<td style="width:88%">
<div style="width:100%">
<input easyui-textbox data-options="required:true" ng-model="title" style="height:32px;"/>
</div>
</td>
</tr>
</table>
I want the input in the last cell to take all the width of the cell it's in.
Unless I provide a width of the input it's not happening.
Put width: 100% on the input element itself, not on a div surrounding it (you can get rid of that div altogether in fact).
Demo: http://jsfiddle.net/1qda1jpx/2/
table {
border: 1px solid blue;
}
td {
border: 1px solid lightgray;
}
input {
width: 100%;
}
<table style="margin-top:10px;width:80.5%;font-size:14px">
<tr>
<td style="text-align:left;width:5%">
<span translate>CaseNumber</span>:
</td>
<td style="text-align:left;width:5%">
<span>
<input easyui-textboxreadonly readonly ng-model="caseid" style="width:80px;height:32px;background-color:#72A4D2"/>
</span>
</td>
<td style="text-align:left;width:2%">
<span translate>Title</span>:
</td>
<td style="width:88%">
<input easyui-textbox data-options="required:true" ng-model="title" style="height:32px;"/>
</td>
</tr>
</table>
You need to set width: 100% for that input element. Otherwise it wont happen.
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'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.