I want to apply the following style on my specific td but I dont know why its unable to do so
/*Style*/
font: 100%/1.4 "Alvi Nastaleeq", Verdana, Arial, Helvetica, sans-serif; color: black;
<td colspan="2" class="centerAlign border">ABC</td>
kindly help to do so. Thanks in advance.
EDIT:
The class centerAlign border is class for all other td's but I want to apply special styling on this cell.
Here is a new style created for your td element
<style type="text/css">
.style1
{
font-size:100%;
font-family: "Alvi Nastaleeq", Verdana, Arial, Helvetica, sans-serif;
color: #00000;
}
</style>
To use it just modify your td as such
<td colspan="2" class="centerAlign border style1">ABC</td>
You cannot use 100%/1.4 for your font-size. Anyway, wrap your style in another class and apply it to your element:
.font-style {
font-family: "Alvi Nastaleeq", Verdana, Arial, Helvetica, sans-serif;
color: black;
font-size: 13px;
}
HTML:
<td colspan="2" class="centerAlign border font-style">ABC</td>
Css
.centerAlign.border{
font: 100%/1.4 "Alvi Nastaleeq", Verdana, Arial, Helvetica, sans-serif; color: black;
}
HTML
<table>
<tr>
<td colspan="2" class="centerAlign border">ABC</td>
</tr>
</table>
Live demo http://jsfiddle.net/mWRMS/1/
HTML
<table>
<tr>
<td colspan="2" class="font">ABC</td>
</tr>
</table>
Css
.font{
font-family:"Alvi Nastaleeq", Verdana, Arial, Helvetica, sans-serif;
color: #000000;
font-size:13px;
}
Related
I have a very simple 4-column bootstrap table within a responsive grid. A few customers have reported that the adLabel cells/columns are not showing and they don't know what the data means. The only difference between adLabel and adData is the font-weight. I thought it was a font issue until this customer sent a screenshot showing that the columns are missing entirely.
Sample Code:
.adLabel {
font-family: Arial, Helvetica, Verdana, Geneva, sans-serif;
color: black;
text-align: left;
vertical-align: top;
font-weight: normal;
}
.adData {
font-family: Arial, Helvetica, Verdana, Geneva, sans-serif;
color: black;
text-align: left;
vertical-align: top;
font-weight: 600;
}
<!-- Bootstrap-3.4.1 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- Body -->
<table class="table table-striped" style="width:100%; border:0; padding:5px;">
<tr><td colspan="4" class="bgLightgray center"><h4>Horse Name</h4></td></tr>
<tr><td class="adLabel" style="width:20%">Location</td>
<td class="adData" style="width:30%">Colorado</td>
<td class="adLabel" style="width:20%">Breed</td>
<td class="adData" style="width:30%">Pony</td></tr>
</table>
Adblockers are blocking the adLabel class. In my case its uBlock.
You just need to rename the class.
I want to use a table to display words and sentences, and I currently have:
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-size: 80%;
}
.table1 th {
background: #111;
color: white;
}
td {
position: relative;
}
td,
th {
padding: 9px;
}
td {
word-break: break-all;
}
tr:nth-child(2n) {
background: #ececec;
}
<div>
<table class="table1">
<thead>
<tr class="tableizer-firstrow">
<th>Spanish</th>
<th>In context</th>
<th>Translation</th>
</tr>
</thead>
<tbody>
<tr>
<td>autor</td>
<td>Stephen King es un <strong>autor</strong> muy famoso.</td>
<td>Stephen King is a very famous <strong>author</strong>.</td>
</tr>
<tr>
<td>favor</td>
<td>Quiero pedirte un <strong>favor</strong>.</td>
<td>I want to ask you a <strong>favor</strong>.</td>
</tr>
<tr>
<td>director</td>
<td>El <strong>director</strong> de la empresa se va de vacaciones.</td>
<td>The <strong>director</strong> of the company is going on vacation.</td>
</tr>
</tbody>
</table>
</div>
In order to avoid the width messing up with the entire page the table is on, I had to add:
td {
word-break: break-all;
}
The issue is that on mobile, words break (obviously):
Is there a better way of maintaining responsiveness, not breaking the page with the width, and not breaking words?
by adding overflow-wrap: break-word it works check the running example in below snippet and to get more information about overflow-wraohttps://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-size: 80%;
}
.table1 th {
background: #111;
color: white;
}
td {
position: relative;
}
td,
th {
padding: 9px;
}
td {
overflow-wrap: break-word
}
tr:nth-child(2n) {
background: #ececec;
}
<div>
<table class="table1">
<thead>
<tr class="tableizer-firstrow">
<th>Spanish</th>
<th>In context</th>
<th>Translation</th>
</tr>
</thead>
<tbody>
<tr>
<td>autor</td>
<td>Stephen King es un <strong>autor</strong> muy famoso.</td>
<td>Stephen King is a very famous <strong>author</strong>.</td>
</tr>
<tr>
<td>favor</td>
<td>Quiero pedirte un <strong>favor</strong>.</td>
<td>I want to ask you a <strong>favor</strong>.</td>
</tr>
<tr>
<td>director</td>
<td>El <strong>director</strong> de la empresa se va de vacaciones.</td>
<td>The <strong>director</strong> of the company is going on vacation.</td>
</tr>
</tbody>
</table>
</div>
To create a responsive table, add a container element with overflow-x:auto around the
Like this:
<div style="overflow-x:auto;">
<table>
...
</table>
</div>
I change the td font size to 18px , but it looks like bold? How can I fix this?
<table border="0" cellpadding="0" cellspacing="0" width="600" bgcolor="#ffffff">
<tr>
<td align="center" style="color: #000000;font-family: Arial, sans-serif;font-weight: normal;font-size: 18px;line-height: 27px;text-decoration:none;padding: 33px 91px 10px 91px;letter-spacing: 1px;border-left:1px solid #d2d2d2;border-right:1px solid #d2d2d2;">
Oops, This Page Could Not Be Found!
</td>
</tr>
<tr>
<td align="center" style="color: #000000; font-family: Arial, sans-serif; font-weight: normal; font-size: 18px; line-height: 18px; text-decoration:none; padding: 28px 0 41px 0; letter-spacing: 1px;border-left:1px solid #d2d2d2;border-right:1px solid #d2d2d2;">
Oops, This Page Could Not Be Found!<a style="color:#7D7D7D;text-decoration:none;">Oops, This Page Could Not Be Found!</a>Oops, This Page Could Not Be Found!
<a style="color:#7D7D7D;text-decoration:none;">Oops, This Page Could Not Be Found!</a>
</td>
</tr>
</table>
Change the font weight of your TD's to a specific number of your choice (100, 200, 300 etc.) and see what is the best for your design like the following example:
td {font-weight: 200;}
There are many ways of solving it. Firstly, you could reduce the weight of the font in your css
td {
font-size: size px;
use font weight
}
or
you could change your font that does not look bold as sometimes it is because of the font being used it looks its bold but it is not bold.
or
you might have put the font in <strong></strong> tag that might have put a bold effect over it.
You have to change the font-weight property.
td{
font-size: 18px;
font-weight: normal;
}
More information about font-weight here https://www.w3schools.com/cssref/pr_font_weight.asp
Maybe a class override your td so you have to use.
td{
font-size: 18px;
font-weight: normal!important;
}
But please note that use !important is not a good practice but an hard fix. If you provide your .css code I can help you more further.
In gMail, the font-size that I set for <td>s work except for this one: (edit: I spotted the typo, changed it but still doesn't work on gmail :( )
<tr>
<td class="inner" style="font-family: 'Arial Black', 'Arial Bold', Gadget, sans-serif; font-weight:800; font-size: 80pt!important; text-align: center">
$33
</td>
</tr>
Any idea why this doesn't work? Strangely enough, it works for this:
<tr>
<td class="inner" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16pt; text-align: center; padding: 0; white-space:nowrap">
We never win because you only believe in science!
</td>
</tr>
On CSS,this rule was added:
div,p,a,li,td {
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
text-size-adjust: none;}
Any help will be appreciated!
It appears you have font-family: twice!
Hope that helps!
I wish to make cell d with full yellow background.
How can I do that?
I am targeting the html in outlook display.
http://jsfiddle.net/f2pb227a/
Update 1: actually, I am using agility html pack to change the cell d at runtime and the table is already well formatted, for some reasons, I just wish change the cell d at last step, therefore, I want to use div to insert yellow bg without change it parent td class.
Final solution: https://jsfiddle.net/0khjqdh0/
<table class="XXX" >
<tr class="header">
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr class="d1">
<td>a</td>
<td>b</td>
</tr>
<tr class="d0">
<td>c
</td>
<td>
<div class="special_class"> d </div>
</td>
</tr>
</table>
.XXX table{
border:0px;
border-collapse:collapse;
padding:0px;
}
.XXX tr.header td {
font-family: Arial, Helvetica, sans-serif;
font-size: 10.0pt;
font-weight: bold;
border:1px solid #C0C0C0;
color:#FFFFFF;
background-color:#4F81BD;
border-collapse:collapse;
padding:5px;
}
.XXX tr.d0 td {
font-family: Arial, Helvetica, sans-serif;
font-size: 10.0pt;
background-color:#E1EEF4;
border:1px solid #C0C0C0;
padding:5px;
white-space:nowrap;
}
.XXX tr.d1 td {
font-family: Arial, Helvetica, sans-serif;
font-size: 10.0pt;
background-color:#FFFFFF;
border:1px solid #C0C0C0;
padding:5px;
white-space:nowrap;
}
.XXX div.special_class {
background-color:yellow;
}
Buddy, please check this - http://jsfiddle.net/afelixj/f2pb227a/4/
.XXX div.special_class {
background-color:yellow;
padding: 5px;
margin: -5px;
}
You can put the class on the cell:
<td class="special_class">
<div> d </div>
</td>
Then set the style on the cell and make it specific enought to override the existing style:
.XXX tr.d0 td.special_class {
background-color:yellow;
}
Demo: http://jsfiddle.net/f2pb227a/1/
try to apply background-color:yellow; to parent td or remove padding from td cell and give that padding to child div
You just need to give class not to child element of the td, but to exact td who's background-color you want to change:
<td class="special_class">