<table border="1" class="sample">
<tr>
<th>Employee</th>
<th>Salary</th>
<th></th>
</tr>
<tr>
<td>EMP1</td>
<td>10000</td>
<td><input id="btn1" type="button" value="Submit">
</tr>
<tr>
<td>EMP2</td>
<td>12000</td>
<td><input id="btn2" type="button" value="Submit"></td>
</tr>
</table>
I've set the alternating color in the css. That is first row is white and second row is yellow.
The problem is the button in the second row is also getting yellow color. I've set Opacity to 0.5 so that it looks greyed out on pageload. How to remove this color overlap?
<style type="text/css">
table.sample {
border: 6px inset #8B8378;
-moz-border-radius: 6px;
}
table.sample td {
border: 1px solid black;
padding: 0.2em 2ex 0.2em 2ex;
color: black;
}
table.sample tr.d0 td {
background-color: #FCF6CF;
}
table.sample tr.d1 td {
background-color: #FEFEF2;
}
</style>
opacity makes your element see-through. An opacity of 0.5 will make the element appear 50% see-through.
The reason you can see your background colour through your input is because your input has this opacity. You're basically asking "I have added a window to my house but I can see through it, how can I prevent this?", and the answer is simply: remove the opacity.
Here is a JSFiddle demo showing 0.0 opacity, 0.5 opacity and no opacity in action: http://jsfiddle.net/JamesD/UQ48z/1.
If you want your button to have a different coloured background whilst retaining its opacity, what you can do is wrap it in a span and then give that span a background:
<td>
<span>
<input id="btn2" type="button" value="Submit">
</span>
</td>
td span { background:#fff; } /* New button background colour */
td span input { margin:0; } /* Remove the button's margins */
JSFiddle example.
Try this instead:
input {color: rgba(0,0,0,0.5);}
E.g. http://codepen.io/pageaffairs/pen/gGIiw
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
table {
border: 6px inset #8B8378;
-moz-border-radius: 6px;
}
table td {
border: 1px solid black;
padding: 0.2em 2ex 0.2em 2ex;
color: black;
}
table tr td {
background-color: #FCF6CF;
}
table tr td {
background-color: #FEFEF2;
}
input {color: rgba(0,0,0,0.5);}
</style>
</head>
<body>
<table border="1" class="simple">
<tr>
<th>Employee</th>
<th>Salary</th>
<th></th>
</tr>
<tr>
<td>EMP1</td>
<td>10000</td>
<td><input id="btn1" type="button" value="Submit">
</tr>
<tr>
<td>EMP2</td>
<td>12000</td>
<td><input id="btn2" type="button" value="Submit"></td>
</tr>
</table>
</body>
</html>
Related
I am using Python to draft a Table for the mail. In the mail I will be needing to color the text if that text is of some text value. Say if the text contains "Successful" then the text will be colored as "GREEN". I am using the Python string template to make a HTML snippet.The $w__ are the variable which contains the text. I would like to change the colors of the text based on the text. Please help me out.
'''
<!DOCTYPE html>
<html>
<head>
<title>XXXXX</title>
<style>
table {
border: 1px solid black;
border-collapse: collapse;
width: 100%;
}
th,td{
border: 1px solid black;
text-align: center;
padding: 5px;
width: 7%;
}
</style>
</head>
<body>
<p>
<p2>Hi All,</p2>
<br>
<br>
<p2>SOME_TEXT</p2>
<table>
<thead>
<tr>
<th></th>
<th>22a</th>
<th>22r</th>
<th>29a</th>
<th>29c</th>
<th>ICAL</th>
<th>22g</th>
<th>22x</th>
<th>22hm</th>
<th>28a</th>
<th>20a</th>
<th>20b</th>
<th>20m</th>
</tr>
</thead>
<tbody>
<tr>
<td>AM</td>
<td>$w21</td>
<td>$w22</td>
<td>$w23 </td>
<td>$w24</td>
<td>$w25</td>
<td>$w26</td>
<td>$w27</td>
<td>$w28</td>
<td>$w29</td>
<td>$w210</td>
<td>$w211</td>
<td>$w20m_3<td>
</tr>
<tr>
<td>LA</td>
<td>$w31</td>
<td>$w32</td>
<td>$w33</td>
<td>$w34</td>
<td>$w35</td>
<td>$w36</td>
<td>$w37</td>
<td>$w38</td>
<td>$w39</td>
<td>$w310</td>
<td>$w311</td>
<td>$w20m_4<td>
</tr>
</tbody>
</table>
<p2>Best Regards</p2>
<br>
<br>
<p2>XXX ---- REGARDS(STATEMENT)</p2>
</body>
</html>
'''
s=Template(bdy).safe_substitute(w21=xxx[0][0],w22=xxx[0][1],w23=xxx[0][2],w24=xxx[0][3],w25=all[0][4],w26=all[0][5],w27=all[0][6],w28=all[0][7],
w29=all[0][8],w210=all[0][9],w211=all[0][10],w20m_3=all[0][11],
w31=xxx[1][0],w32=xxx[1][1],w33=xxx[1][2],w34=xxx[1][3],w35=all[1][4],w36=all[1][5],w37=all[1][6],w38=all[1][7],
w39=all[1][8],w310=all[1][9],w311=all[1][10],w20m_4=all[1][11])
You can use basic style to add class and append that class in td.
<style>
.success {
background: green
}
.error {
background: red
}
<style>
<td class="success">AM</td>
<td class="success">$w21</td>
<td class="error">$w21</td>
<!DOCTYPE html>
<html>
<head>
<title>XXXXX</title>
<style>
table {
border: 1px solid black;
border-collapse: collapse;
width: 100%;
}
th,td{
border: 1px solid black;
text-align: center;
padding: 5px;
width: 7%;
}
.success {
background: green
}
.error {
background: red
}
</style>
</head>
<body>
<p>
<p2>Hi All,</p2>
<br>
<br>
<p2>SOME_TEXT</p2>
<table>
<thead>
<tr>
<th></th>
<th>22a</th>
<th>22r</th>
<th>29a</th>
<th>29c</th>
<th>ICAL</th>
<th>22g</th>
<th>22x</th>
<th>22hm</th>
<th>28a</th>
<th>20a</th>
<th>20b</th>
<th>20m</th>
</tr>
</thead>
<tbody>
<tr>
<td class="success">AM</td>
<td class="success">$w21</td>
<td>$w22</td>
<td>$w23 </td>
<td>$w24</td>
<td>$w25</td>
<td>$w26</td>
<td>$w27</td>
<td>$w28</td>
<td>$w29</td>
<td>$w210</td>
<td>$w211</td>
<td>$w20m_3<td>
</tr>
<tr>
<td>LA</td>
<td>$w31</td>
<td class="success">$w32</td>
<td>$w33</td>
<td class="error">$w34</td>
<td>$w35</td>
<td>$w36</td>
<td>$w37</td>
<td>$w38</td>
<td>$w39</td>
<td class="error" >$w310</td>
<td>$w311</td>
<td>$w20m_4<td>
</tr>
</tbody>
</table>
<p2>Best Regards</p2>
<br>
<br>
<p2>XXX ---- REGARDS(STATEMENT)</p2>
</body>
</html>
When droppable element is scaled, JQueryUI incorrectly adds/remove hover class to the elements: two 'tr' elements of scaled table get this class at once.
Is there any way to avoid this?
PS
bug ticket here
dirty fix here(codepen)
or here(github)
$('div').draggable();
$('tr').droppable({hoverClass:"highlight"});
div {
display:inline-block;
padding:3px;
border:1px solid rgba(200,0,0,.6);
}
table {
transform:scale(0.5);
border:1px solid gray;
padding:0;
border-collapse: collapse;
}
td {
padding:5px;
background: rgba(0,0,150,0.3);
}
tr.highlight td {
background: rgba(150,0,0,0.8);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div>grab me and drag over the table</div>
<table>
<tr>
<td>11111111111111111111111</td>
</tr>
<tr>
<td>222222222222222222222</td>
</tr>
<tr>
<td>333333333333333333333</td>
</tr>
<tr>
<td>11111111111111111111111</td>
</tr>
<tr>
<td>222222222222222222222</td>
</tr>
<tr>
<td>333333333333333333333</td>
</tr>
</table>
Actually transform:scale() change the element pixel ratio not its actual pixel on DOM
so why not just reduce the font-size and padding of td instead of using transform
Stack Snippet
$('div').draggable();
$('tr').droppable({
hoverClass: "highlight"
});
div {
display: inline-block;
padding: 3px;
border: 1px solid rgba(200, 0, 0, .6);
}
table {
border: 1px solid gray;
padding: 0;
border-collapse: collapse;
}
td {
padding: 2px;
background: rgba(0, 0, 150, 0.3);
font-size: 10px;
}
tr.highlight td {
background: rgba(150, 0, 0, 0.8);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div>grab me and drag over the table</div>
<table>
<tr>
<td>11111111111111111111111</td>
</tr>
<tr>
<td>222222222222222222222</td>
</tr>
<tr>
<td>333333333333333333333</td>
</tr>
<tr>
<td>11111111111111111111111</td>
</tr>
<tr>
<td>222222222222222222222</td>
</tr>
<tr>
<td>333333333333333333333</td>
</tr>
</table>
I have this code:
body {
background-color: #2c3e50;
}
#td_design {
background-color: #f39c12;
color: #FFFFFF;
}
<table>
<tr>
<td id="td_design">
asdasd<br/> asdsajsakj
<br/> asdqjwhdksad
<br/>
</td>
</tr>
</table>
I tried putting a color on the body to test if the TD's Color actually expands through. Here's the result:
I know this can be fixed by adding the id = "td_design" on the <table> instead on the <td> but I can't since I want to add different background-color to each td . How can I make the TD's color extend to the whole page?
Tables, by default, have some spacing between cells.
You can remove this spacing using one of the following:
border-collapse: collapse;
/* OR */
border-spacing: 0;
If your table has no borders then you can use whichever one you want. If you do start adding borders, then collapse will start merging borders together (which can lead to interesting effects...) while border-spacing will just put them side-by-side with no gap.
Here's some demos:
table {
margin-bottom: 16px;
background-color: black;
}
td {
background-color: #cfc;
}
#tbl_2 {border-spacing: 0}
#tbl_3 {border-collapse: collapse}
#tbl_4 td {border: 1px solid #3cf}
#tbl_5 {border-spacing: 0}
#tbl_5 td {border: 1px solid #3cf}
#tbl_6 {border-collapse: collapse}
#tbl_6 td {border: 1px solid #3cf}
#tbl_7 {border-collapse: collapse}
#tbl_7 td {border: 1px solid #3cf}
td.red {
border-color: #f66 !important;
background-color: #fcc !important;
}
td.red.fix {
border-style: double !important;
}
Default
<table id="tbl_1"><tr><td>X1Y1</td><td>X2Y1</td></tr><tr><td>X1Y2</td><td>X2Y2</td></tr></table>
Spacing 0
<table id="tbl_2"><tr><td>X1Y1</td><td>X2Y1</td></tr><tr><td>X1Y2</td><td>X2Y2</td></tr></table>
Collapse
<table id="tbl_3"><tr><td>X1Y1</td><td>X2Y1</td></tr><tr><td>X1Y2</td><td>X2Y2</td></tr></table>
Default with cell borders
<table id="tbl_4"><tr><td>X1Y1</td><td>X2Y1</td></tr><tr><td>X1Y2</td><td class="red">X2Y2</td></tr></table>
Spacing 0 (note double width on middle borders, and blue/red together)
<table id="tbl_5"><tr><td>X1Y1</td><td>X2Y1</td></tr><tr><td>X1Y2</td><td class="red">X2Y2</td></tr></table>
Collapse (note loss of red borders in middle)
<table id="tbl_6"><tr><td>X1Y1</td><td>X2Y1</td></tr><tr><td>X1Y2</td><td class="red">X2Y2</td></tr></table>
Double-style "fix" to make the red border more "important" in collapse priority
<table id="tbl_7"><tr><td>X1Y1</td><td>X2Y1</td></tr><tr><td>X1Y2</td><td class="red fix">X2Y2</td></tr></table>
Make sure in your css that you have all spacing and padding set to 0px
Try this code:
I added different class as per requirement (different color for each TD).
added 3 classes namely td_design1, td_design2 and td_design3 each with different color.
So this will call different class style for different table TD.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<style>
body {
background-color: #2c3e50;
}
#td_design1 {
background-color: #f39c12;
color: #FFFFFF;
}
#td_design2 {
background-color: #559542;
color: #FFFFFF;
}
#td_design3 {
background-color: #f00112;
color: #FFFFFF;
}
</style>
<table>
<tr>
<td id = "td_design1">
asdasd
</td>
<td id = "td_design2">
asdsajsakj
</td>
<td id = "td_design3">
asdqjwhdksad
</td>
</tr>
</table>
</body>
</html>
remove border from tr / td, this seems to be a border: 3px inset gray or close to...
body {
background-color: lightgray;
}
#td_design {
background-color: #f39c12;
color: #FFFFFF;
}
.withBorder {
border: 3px inset gray;
}
.withoutBorder{
border: none;
}
<table>
<tr>
<td id="td_design">
<h5>default navigator style</h5>
asdasd<br/> asdsajsakj
<br/> asdqjwhdksad
<br/>
</td>
</tr>
<tr>
<td id="td_design" class=withBorder>
<h5>with border styled</h5>
asdasd<br/> asdsajsakj
<br/> asdqjwhdksad
<br/>
</td>
</tr>
<tr>
<td id="td_design" class=withoutBorder>
<h5>with border none (like many browsers default)</h5>
asdasd<br/> asdsajsakj
<br/> asdqjwhdksad
<br/>
</td>
</tr>
</table>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style type="text/css">
#page {
size:A4 portrait;
}
</style>
<style type="text/arial" media="print">
#page {
margin: 75px 16px 75px 16px;
#PageBreak{
page-break:always;
page-break-inside:avoid;
}
}
div.headerqwe{
postion:running(headerqwe);
width:750px;
height:960px;
border-top:1.2px solid black;
border-bottom:1.2px solid black;
border-left:1.2px solid black;
border-right:1.2px solid black;
}
</style>
</head>
<div class="headerqwe">
<table border="2" cellspacing="0" cellpadding="0" >
<tr>
<td align="center">
<apex:outputText value="Page " style="font-face:verdana;font-size:0.68em;"/>
<span class="pagenumber" style="font-face:verdana;font-size:0.68em;"/>
<apex:outputText value="of" style="font-face:verdana;font-size:0.68em;padding-left:2px;padding-right:2px"/>
<span class="pagecount" style="font-face:verdana;font-size:0.68em;"/>
</td>
</tr>
</table>
</div>
I need to repeat <div> border on every page. Currently I'm getting the border only on the first page, and I need to get the border running on every page.
How can I do that?
1) if you want to get to for all the div's your using assign style to div tag
div{
border:1.2px solid black
}
2) if you apply styles for specified Div's append one class for that specified div's ..like BorderedDiv
div.BorderedDiv{
border:1.2px solid black
}
I am not to familiar with javascript, jquery etc. I need help to find out how to after click on the button, pop out filed where I can enter answer for specific question, and after that to show under that question(in same row). Also you can check that here http://jsfiddle.net/bobouch/thbnZ/1/
.table {
width: 99%;
color:#333333;
background-color: #E0E0E0;
border-width: 1px;
border-color: #999999;
border-radius: 3px 3px 3px 3px;
margin: auto;
margin-top: 20px;
font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
table , th {
background-color: #F08200;
padding: 8px;
border: 0px solid;
border-color: #E0E0E0;
color:#ffffff;
}
table th:first-child {
width: 10%;
}
table th:nth-child(2) {
width: 80%;
}
table th:last-child {
width: 100px;
}
table, tr {
background-color:#FFFFFF;
}
table tr:hover {
background-color: #D4D4D4;
}
table, td {
text-align: center;
border: 0px solid;
padding: 5px;
border-style: solid;
border-color: #E0E0E0;
}
//html
<table class='table'><th>Id</th><th>Question</th><th>Date</th><th>Answer</th>
<tr>
<td>
1
</td>
<td>
Some question here1
</td>
<td>
Date
</td>
<td>
<button onclick='myFunction()'>Click to answer</button>
</td>
</tr>
<tr>
<td>
2
</td>
<td>
Some question here2
</td>
<td>
Date
</td>
<td>
<button onclick='myFunction()'>Click to answer</button>
</td>
</tr>
<tr>
<td>
3
</td>
<td>
Some question here3
</td>
<td>
Date
</td>
<td>
<button onclick='myFunction()'>Click to answer</button>
</td>
</tr>
</table>
If you're using pure javascript you can use some function parameters to do what you would like.
Something like this:
HTML
<h3 align="center">After hiting the Click button, i need to pop out field where i can answer specific question? How to produce an answer in the same row under each question </h3>
<table class='table'><th>Id</th><th>Question</th><th>Date</th><th>Answer</th>
<tr>
<td>1</td>
<td id='q1'>Some question here1</td>
<td>Date</td>
<td><button onclick="clickMe('First Question', 'q1');" type="button">Click to answer</button></td>
</tr>
<tr>
<td>2</td>
<td id="q2">Some question here2</td>
<td>Date</td>
<td><button onclick="clickMe('Second Question', 'q2');" type="button">Click to answer</button></td>
</tr>
<tr>
<td>3</td>
<td id="q3">Some question here3</td>
<td>Date</td>
<td><button onclick="clickMe('Third Question', 'q3');" type="button">Click to answer</button></td>
</tr>
</table>
Javascript:
<script type="text/javascript">
function clickMe(Question, id)
{
var QuestionPrompt = prompt(Question,"Type your answer here...");
if (QuestionPrompt!==null)
{
var curText = document.getElementById(id).innerHTML;
var newText = curText + "<br/>" + QuestionPrompt;
document.getElementById(id).innerHTML = newText;
}
}
</script>
The onclick events send the question text and the id of the cell you want to put the answer in. The javascript function shows a simply input box and takes the answer and appends it to the cell with the question.
Not pretty or complicated, but it gets the job done. You could improve it in a lot of different ways.