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
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
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>
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;}
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;
}
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.