White space between td in table in gmail - css

I have a table and I send it as html on gmail but there are white gaps in it. It's due to gmail, I suppose. There is white space between two td.
How to remove it?
My code is:
<table>
<tr class="empty"><td></td></tr>
<tr class="empty"><td></td></tr>
<tr>
<td colspan="4" style="background-color: #007C66 !important; color:white !important;">
Company:
</td>
<td colspan="4" style="background-color: #007C66 !important; color:white !important;">
Employee:
</td>
</tr>
//other code
</table>

There is default cell spacing in tables. Set cellspacing="0" in table.
<table cellspacing="0">
<tr class="empty"><td></td></tr>
<tr class="empty"><td></td></tr>
<tr>
<td colspan="4" style="background-color: #007C66 !important; color:white !important;">
Company:
</td>
<td colspan="4" style="background-color: #007C66 !important; color:white !important;">
Employee:
</td>
</tr>//other code
</table>
Here is the DEMO

Related

Change the color of buttons designed by table with CSS

Considering the following code displaying two different buttons structured by a table (<tbody class="btn btn-left"> is a button and <tbody class="btn btn-right"> is another button:
<table>
<tbody class="btn btn-left">
<tr>
<td class="btn-tl"></td>
<td class="btn-tc"></td>
<td class="btn-tr"></td>
</tr>
<tr>
<td class="btn-ml"></td>
<td class="btn-mc"></td>
<td class="btn-mr"></td>
</tr>
<tr>
<td class="btn-bl"></td>
<td class="btn-bc"></td>
<td class="btn-br"></td>
</tr>
</tbody>
</table>
<table>
<tbody class="btn btn-right">
<tr>
<td class="btn-tl"></td>
<td class="btn-tc"></td>
<td class="btn-tr"></td>
</tr>
<tr>
<td class="btn-ml"></td>
<td class="btn-mc"></td>
<td class="btn-mr"></td>
</tr>
<tr>
<td class="btn-bl"></td>
<td class="btn-bc"></td>
<td class="btn-br"></td>
</tr>
</tbody>
</table>
The css is working but doesn't target the td, which I need to
.btn-left {
background-color: red;
border-color: red;
}
.btn-right {
background-color: blue;
border-color: blue;
}
How would you set up the css so that one button displays a color and the other button displays another color ?
Thank you for your help.
at first - you must use the table tag.
Then put following classes in your Stylesheet:
.btn-left { color: blue; }
.btn-right { color: red; }
a liddle fiddle

unwanted empty cells on rows inside table with inline-block display

I have 2 tables that I want to display side by side. So I set the display style property as display: inline-block. The problem is, on both tables, the columns are not taking the full width of the table. There is/are unseen cell(s). Interestingly this does not happen if I remove the DOCTYPE HTML line from the top of the page. The red marked area in the screenshot is my concern.
I have tried setting the font size to 0 of the "tr" and then add my desired font size to the "td". Also tried adding negative right padding/margin, but could not get it to work. Please suggest!
Empty cells at the right of table:
<table id="attn" style="display: inline-block; border: 1px solid green">
<tr>
<td >
Attn: Mr. HM. Mustafizur Rahaman
<footer>Vice President</footer>
</td>
</tr>
<tr>
<td>
Attn: Mr. HM. Mustafizur Rahaman
<footer>Vice President</footer>
</td>
</tr>
</table>
<table id="register" style="display: inline-block; border: 1px solid blue">
<caption id="cap_tab_1">Invoice<caption>
<thead>
<tr>
<td>No.</td>
<td colspan="2">SSL/16/02011</td>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 25%">
Day
</td>
<td style="width: 40%">
Month
</td>
<td style="width: 35%">
Year
</td>
</tr>
</tbody>
</table>
To fix the problem you can use display: inline-table instead of display: inline-block.
Explanation: <table> by default receives display property display: table. This is how it arranges rows/columns and determines how it'll be displayed on the page.
The moment you change that to display: inline-block, <table> looses its property to be a proper table according to CSS. So <tr> <td> etc. don't work as expected, as they shouldn't do inside a display: inline-block element. That's why display: inline-table solves the issue.
What about float instead of inline. Worked for me in IE, Chrome and Firefox.
<!DOCTYPE html>
<table id="attn" style="float:left; border: 1px solid green">
<tr>
<td >
Attn: Mr. HM. Mustafizur Rahaman
<footer>Vice President</footer>
</td>
</tr>
<tr>
<td>
Attn: Mr. HM. Mustafizur Rahaman
<footer>Vice President</footer>
</td>
</tr>
</table>
<table id="register" style="float:left; border: 1px solid blue">
<caption id="cap_tab_1">Invoice<caption>
<thead>
<tr>
<td>No.</td>
<td colspan="2">SSL/16/02011</td>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 25%">
Day
</td>
<td style="width: 40%">
Month
</td>
<td style="width: 35%">
Year
</td>
</tr>
</tbody>
</table>

Conditionally change color of angularjs element?

Im still pretty new to AngularJS. Im trying to change the color of the table element so that its yellow if the user voted on this choice.
<div ng-show="poll.userVoted">
<table class="result-table">
<tr ng-repeat="choice in poll.choices">
<td>{{choice.text}}</td>
<td>
<table ng-if="choice.text == poll.userChoice.text" style="background-color: yellow; width: {{choice.votes.length/poll.totalVotes*100}}%; text-align: right">
<tr>
<td>{{choice.votes.length}}</td>
</tr>
</table>
<table ng-if="choice.text != poll.userChoice.text" style="background-color: lightblue; width: {{choice.votes.length/poll.totalVotes*100}}%; text-align: right">
<tr>
<td>{{choice.votes.length}}</td>
</tr>
</table>
</td>
</tr>
</table>
This is done by using ng-class.
Use ng-class on your td like this:
<td ng-class="{yellowstyle: choice.text==poll.userChoice.text}">...</td>
that will put the css class yellowstyle on the item when your condition is true.
And in your example:
<table class="result-table">
<tr ng-repeat="choice in poll.choices">
<td>{{choice.text}}</td>
<td>
<table style="width: {{choice.votes.length/poll.totalVotes*100}}%; text-align: right">
<tr>
<td ng-class="{yellowstyle: choice.text==poll.userChoice.text, lightbluestyle: choice.text!=poll.userChoice.text}">{{choice.votes.length}}</td>
</tr>
</table>
</td>
</tr>
</table>
with a style.css file that has:
.yellowstyle {background-color: yellow;}
.lightbluestyle {background-color: lightblue;}

How to externally style with CSS the specific 3 td tags on the html table generated by the pager row of a asp.net gridview control

The working version of the html table generated markup with css is here:
http://jsfiddle.net/nexU/JkUCQ/1/
As you can see all I need is to set these align and width styles for those 3 specific TD tags on a external css and override the ones that are automatically generated by asp control.
Thanks in advance for your help.
/*
I want 1st pagerRow TD to have width 10%
I want 2nd pagerRow TD to have width 80%
I want 3rd pagerRow TD to have width 10%
*/
/------------style.css------------/
.pagerRow
{
background: #3D6AA2;
font-weight: normal;
color: #fff;
text-align: left;
height: 30px;
}
.pagerRow td
{
border: solid 1px red;
}
/------------ part of html generated by control------------/
<table id="mainContacts" class="contactsBase" cellspacing="0" border="1" style="width: 100%;">
<tbody>
<tr class="header_row">
</tr>
<tr class="odd">
</tr>
<tr class="even">
</tr>
<tr class="odd">
</tr>
<tr class="even">
</tr>
<tr class="odd">
</tr>
<tr class="even">
</tr>
<tr class="odd">
</tr>
<tr class="even">
</tr>
<tr class="odd">
</tr>
<tr class="even">
</tr>
<tr class="odd">
</tr>
<tr class="pagerRow" align="center">
<td colspan="5">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody>
<tr>
<td align="left" width="25%"> <!--How to set these align and width styles on external css and override these ones that are automatically generated by asp control?-->
</td>
<td align="center" width="50%"> <!--How to set these align and width styles on external css and override these ones that are automatically generated by asp control?-->
<p> 1,2,3,4,5 </p>
</td>
<td align="right" width="25%"> <!--How to set these align and width styles on external css and override these ones that are automatically generated by asp control?-->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Working fiddle: http://jsfiddle.net/JkUCQ/4/
(updated based on your new input)
Add this to your CSS:
.pagerRow tr td:nth-child(1) {
width:10% !important;
}
.pagerRow tr td:nth-child(2) {
width:80% !important;
}
.pagerRow tr td:nth-child(3) {
width:10% !important;
}

how to make div overflow when there're some tables in the div content

My html code with inline css:
<div id="ggicci_syntax_highlighter" style="border: solid 3px black; cursor: text; overflow-x: auto; width: 100%;">
<table id="ggicci_outer_table" cellspacing="0" style="font-family:Consolas;">
<colgroup>
<col style="background-color: #44F;"><!-- You can set font here -->
<col style="background-color: #f4f4f4; width: 100%;">
</colgroup>
<tr>
<td></td><!-- corner -->
<td id="ggicci_language_text" style="font-size:25px; color: #777; font-family: Arial Black;"> <!-- header -->
C++
</td>
</tr>
<tr>
<td>
<table id="ggicci_line_number" style="font-size: 14px; color: #DDD;"><!-- You can set style here -->
<tr>
<td>1:</td>
</tr>
<tr>
<td>2:</td>
</tr>
<tr>
<td>3:</td>
</tr>
<tr>
<td>4:</td>
</tr>
<tr>
<td>5:</td>
</tr>
<tr>
<td>6:</td>
</tr>
<tr>
<td>7:</td>
</tr>
<tr>
<td>8:</td>
</tr>
</table>
</td>
<td>
<table id="ggicci_code_body" style="font-size: 14px; width: 100%;"><!-- You can set style here -->
<tr>
<td style="background: #FFF">
<span style="color:#FF7700; font-weight:bold;">#include</span> <iostream>
</td>
</tr>
<tr>
<td>
<span style="color:blue; font-weight:bold;">using</span> namespace std;
</td>
</tr>
<tr>
<td style="background: #FFF">
</td>
</tr>
<tr>
<td>
<span style="color:blue; font-weight:bold;">int</span> main()
</td>
</tr>
<tr>
<td style="background:#FFF;">
{
</td>
</tr>
<tr>
<td>
std::cout << <span style="color:#EB2244;">"Hello World!"</span> << std::endl;<span style="color:green;">//write "Hello World!" to console............................................................</span>
</td>
</tr>
<tr>
<td style="background: #FFF"> <span style="color:blue; font-weight:bold;">return</span> 0;</td>
</tr>
<tr>
<td>
}
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
and I can't make the content in div scroll when the text in a line in the table where the id is "ggicci_code_body" overflows. I'm new to css and now I'm designing a syntax highlighter for programming practice. So any solution? and why this can't work?
Add '<!doctype html>' at the start of html file.

Resources