<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Superscript_size_in_table_cell</title>
<meta name="generator" content="BBEdit 10.5" />
<style>
table {
width: 60%;
font-size: 0.8em;
margin-left:auto;
margin-right:auto;
border-collapse: collapse;
}
.super_script {
font-size: 80%;
vertical-align: super;
}
</style>
</head>
<body>
<table id="table_1a-27">
<caption class="table_caption">Table 1A-27</caption>
<tr>
<td>Some text<span class="super_script">Note 1</span></td>
</tr>
<tr>
<td>
<ol>
<li>Beginning of sentence<span class="super_script">Note 2</span> than the rest of the sentence.</li>
<li>Some stuff here</li>
</ol>
</td>
</tr>
</table>
</body>
</html>
I want to change the text size and position for part of the contents of a table cell but the above doesn't seem to work for text within a table cell. I'd like be able to adjust the size if the table elements, not just for superscripting purposes.
For a basic :
1- put your 'super scripted' text in a <sup>
2- style your <sup> this way :
sup {
position: relative;
font-size: 75%;
line-height: 0;
top: -0.5em;
vertical-align: baseline;
}
Also interesting questions around same subject :
Wrong rendering of <sup> in table with valign=top in Chrome and Safari
relative font-size of <sub> or <sup> and their descendants in IE
Keep consistent line spacing with <sup> and <sub>
Html upper and lower indecies
[Edit] :
Some users mentioned some browser 'buggy' behaviours with relative sizing of font-size for the <sub> and <sup> markups.
Perhaps you should consider keeping on using a <span>
it doesn't work because you didn't define the cell class
just put
class="super_script"
in the td tag.
to change the size of cells make sure you do
table {table-layout: fixed;}
and you should be set!
Related
My html email template works well with gmail except windows 10 mail. Some images look giant on my windows 10 mail but normal size on my gmail. I have check out this post and its solution, but it is not working. Below is my whole html code
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
<title th:remove="all"></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style>
#container {
text-align: center;
max-width: 900px;
width:80%;
margin-left:10%;
margin-right:10%;
}
#salutation {
color: #e45042;
font-style: bold;
font-size:14px;
margin-top:5%;
}
#title {
font-style: bold;
font-size:17px;
color: #2869af;
}
#qrText {
margin-top:5%;
font-size: 11px;
font-style:italic;
}
#bodytext {
font-size:14px;
}
#footer {
text-align: center;
font-size: 11px;
width:70%;
margin-left:15%;
margin-top:5%;
}
</style>
</head>
<body>
<div id="container">
<div>
<img th:src="#{${environmentUrl+'/dist/img/email/some_img.png'}}" style="width:100%;"/>
</div>
<div id="salutation">
<p>Hi <span th:text="${name}"></span>,</p>
</div>
<div id="bodytext">
<p>
<b>SOME TEXT</b>
</p>
</div>
<div>
<table style="width:100%;">
<tr>
<td style="width:23%"><img th:src="#{${environmentUrl+'/dist/img/email/some_img.png'}}" style="width:100%"/></td>
<td style="vertical-align:bottom;width:31%"><img th:src="#{${environmentUrl+'/dist/img/email/some_img.png'}}" width="100%"/></td>
<td style="width:23%"><img th:src="#{${environmentUrl+'/dist/img/email/some_img.png'}}" style="width:100%"/></td>
<td style="width:23%"><img th:src="#{${environmentUrl+'/dist/img/email/some_img.png'}}" style="width:100%"/></td>
</tr>
<tr>
<td><b>SOME TEXT</b></td>
<td><b>SOME TEXT</b></td>
<td><b>SOME TEXT</b></td>
<td><b>SOME TEXT</b></td>
</tr>
</table>
</div>
</div>
</body>
</html>
This template works well in gamil, everything down to the size and align of the images are correct, it is just not working in windows 10 mail.
What I have tried:
changed 100% -> 100px
changed 100% -> 100
Actual result: nothing changes
Expected result: images and align to be working in windows 10 mail.
Windows 10 Mail uses Word's rendering engine, just like the Outlooks on Windows. Word's rendering engine doesn’t understand the style attribute on <img> elements. So what you need to do is define a width attribute with the expected value for Outlook, and have a more flexible width in an inline style for other email clients.
Also please note that the Outlooks (and Windows 10 Mail) don’t react properly to percentage widths. Setting a width="100%" would make the image "100% the width of the file physical width", and not "100% of its parent element" as you'd expect in CSS. So don't use percentages for the width attribute.
In your case, it would end up looking something like the following:
<img th:src="#{${environmentUrl+'/dist/img/email/some_img.png'}}" width="600" style="width:100%"/>
I'm having difficulties in formatting my HTML page.
As you can see from the source code, it's a table where each row contains a formatted list of records dynamically populated by my web app.
In the case one of the columns has an empty value, I would like to keep the formatting of the lines, so I should basically add enough spaces or think about an HTML block with the exact size of the text value.
The nice thing is each value has a fixed character length, so it should come in advantage.
I thought about creating a span but it doesn't support the width attribute and I should change the style to display:block, but in my opinion, it's getting a little too tricky, as I would like a simple and clever solution.
I attach the source code of the page and the output I get at the moment.
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252"></head>
<body>
<table>
<tr><td style="font-size: 11px; color: #000000; font-family: Verdana; border-bottom: #ff0000 1px solid;">
<table>
<tr><td>test1:</td></tr>
<tr><td>
<ul>
<li>FIELD1:;, FIELD2: <b>443</b>, FIELD3: <b>191,51</b></li>
<li>FIELD1: <b>1000101</b>, FIELD2: <b>442</b>, FIELD3: <b>43,2</b></li><li>FIELD1: <b>1000176</b>, FIELD2:, FIELD3: <b>36</b></li>
</ul></td></tr>
</table>
</body>
</html>
Your problem is that you got your semantics messed up. You try to build a table but then you put the whole table content in 1 cell and then you try to emulate the table in there by using a list.
Just put 1 field in 1 table cell and and it will come together quite easily. Also: "test1" is in this context the table caption or maybe a headline.
The first variant assumes that the field names might vary from row to row. If that is not the case they belong into the table header instead.
table#test1 tbody tr th {
font-weight: normal;
text-align: left;
}
table#test1 tbody tr td {
font-weight: bold;
text-align: right;
}
table#test2 thead tr td {
font-weight: bold;
}
table#test2 tbody tr td {
text-align: right;
}
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
</head>
<body>
<table id="test1">
<caption>test1</caption>
<tbody>
<tr><th>FIELD1:</th><td></td><th>FIELD2:</th><td>443</td><th>FIELD3:</th><td class="value">191,51</tr>
<tr><th>FIELD1:</th><td class="value">1000101</td><th>FIELD2:</th><td class="value">442</td><th>FIELD3:</th><td class="value">43,2</tr>
<tr><th>FIELD1:</th><td class="value">1000176</td><th>FIELD2:</th><td class="value"></td><th>FIELD3:</th><td class="value">36</tr>
</tbody>
</table>
<table id="test2">
<caption>test2</caption>
<thead>
<tr><td>FIELD1</td><td>FIELD2</td><td>FIELD3</tr>
</thead>
<tbody>
<tr><td></td><td>443</td><td>191,51</tr>
<tr><td>1000101</td><td>442</td><td>43,2</tr>
<tr><td>1000176</td><td></td><td>36</tr>
</tbody>
</table>
</body>
</html>
I'm having bad time trying to align a clickable element on the right of a text <input> element. It wouldn't be a problem if I would have fixed dimensions, but the <input> will be inside of a container with variable size. The resizing will be made with a js function.
I need to place the clickable element on the far right, inside the <td> and, the remaining space to be filled 100% by the <input>. At this moment I'm totally confused and I cannot come with a clean solution that doesn't involve nested tables inside table cell.
At this moment, the clickable is <a> tag, but I'm not even sure if that's the best approach.
Need some clear advice right now.
Here is the basic code:
<html>
<head>
<style type="text/css">
table{border-collapse:collapse;}
td{
border: 1px solid black;
padding: 2px;
}
.container{
width: 100px;/*this will be dinamically resized with JS*/
}
input[type="text"]{
width: 100%;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<td>
<div class="container">
<input type="text"><a href="#" onclick="/*call myFunc*/" >▲</a>
</div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
data1
</td>
</tr>
</tbody>
</table>
</body>
</html>
Float the clickable element to right, wrap the input by a division and set a margin-right to it:
CSS:
input[type="text"] { width: 100%; }
.wrapper { margin-right: 25px; }
.clickable { float: right; }
HTML:
<a class="clickable" href="#" onclick="/*call myFunc*/" >▲</a>
<div class="wrapper">
<input type="text">
</div>
JSBin Demo
There is a table inside a paragraph. The cell inside the table has extra new line. Below is relevant part of the code.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.Page1773023 {}
.f31 {font-family:Times New Roman;font-size:12.00pt;font-style:normal;font-weight:normal;line-height:114%;}
.f1 {font-family:Arial;font-size:10.00pt;font-style:normal;font-weight:normal;line-height:114%;}
</style>
</head>
<body>
<div class="Page1773023" style="height:1056px;width:816px;">
<p class="normal"><pre>
<table class="normal" style="width:99.00px;border-spacing:0px;border-collapse:collapse;border:1.00px solid #000000;;">
<tr>
<td style="height:16.000px;width:96.000px;;;" >
<p class="normal"><pre>
<span class="f1" style="color:#FF0000;" >11111</span></pre></p>
</td>
</tr>
</table><br style="clear:left;"/>
</pre></p>
</div>
</body>
</html>
Now when I remove the <pre> tag from outer most <p>, the new lines is not seen. Any ideas why this is happening?
Download HTML Tidy Plugin on firefox and fix the errors...
By the way, I would try to minimize the tags you have used. Why do you need p, span, table, div, pre ?
First decide on what the layout should be and write only the code you really need.
Here is an example of how you could achieve around the same output. Make sure you have firebug or some inspect tools on your browser. It helps you make minor changes to margins and find the correct values.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.box {
width:104px;
height:80px;
border:1px solid;
margin-top:10px;
}
.box td {
color: red;
font-family: Arial;
font-size: 10.00pt;
font-style: normal;
font-weight: normal;
line-height: 114%;
}
</style>
</head>
<body>
<table class="box">
<tr>
<td>
11111
</td>
</tr>
</table>
</body>
</html>
The new line between <pre> and <table> is displayed as it is within a <pre> tag. This could be fixed by placing them on the same line: <pre><table ...>
I need to up text but if i apply class to TD or TR in IE, Opera and Chrome all cell goes up (background and border and text in cell).
Please look example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.myClass td{
position:relative;
top:-8px;
color:blue;
}
.myClass {
position:relative;
top:-8px;
color:blue;
}
td { border: red solid 2px ;}
</style>
</head>
<body>
<p> </p>
<table width="384" height="89" border="2" cellpadding="0" cellspacing="3" bgcolor="#cccccc">
<tr >
<td width="109" bgcolor="#FFCC00"> </td>
<td width="255" bgcolor="#00CCFF" class="myClass">this TD have class=".myClass"</td>
</tr>
<tr class="myClass">
<td bgcolor="#999999"> </td>
<td bgcolor="#FFFF00">this TR have class=".myClass"</td>
</tr>
<tr>
<td bgcolor="#666666"> </td>
<td bgcolor="#FFFFFF"><span class="myClass">this text within span-tags (.myClass)</span></td>
</tr>
</table>
</body>
</html>
Firefox don`t affect if is applied to tr_or_td, affect only to text with span-tag.
Every browsers work correct if in every TD of a row place text within
<span class="tdclass"> mytext in span-tag </span>
QUESTIONS) :
Is there some css structure to assign style only to data within TD but not to this TD
tr.myclass TD {}
in IE, Opera, Chrome applies to all cell, in Firefox don`t work at all.
Is there some css selector of TEXT - I mean for example:
.myclass > b
will be applied when in tag with .myclass we have b-tag
maby some word like EVERY_TEXT - may be such selector, for example:
.myclass > EVERY_TEXT {}
can anybody suggest another workable way to up text in all cells of table without span in every cell, and without .js
Thanks for helping!
Use an asterisk to select all elements in that section of the DOM, e.g.
<div class="one">
testing <br/>
<span> Test </div>
</div>
.one * {
color: red;
}
Fiddle here, if you need to check it
You could add a span tag around the content in the TD cell and apply CSS to the span.
<td>
<span class="styled_cell_content">Content</span>
</td>
Did you try a negative padding?
.myClass,
.myClass td {
color:blue;
padding-top: -8px;
}
If you're still looking for the answer to this, you need to specifically set the border at the td (and th) level - in IE this takes precedence over the color set on the whole element. For example, add this to your css, now IE will use this to style the border and the color set on td won't change it!
td, th {
border: 1px solid #000;
}