I am trying to print start and end under execution, but I get an extra cell beside End. I use:
<table style="float: center;border:2px;font-size:20px;color:white;border-collapse: collapse;border-spacing: 3;width: 25%;"> <tr><td> PC </td> <td> INSTRUCTION </td> <td> ISSUED </td> <td colspan="2"><table style="font-size:20px;color:white;border-collapse: collapse;border-spacing: 3;width: 25%;"><tr><td>EXECUTION</td></tr></table><table style="font-size:20px;color:white;border-collapse: collapse;width: 25%;"><tr><td>START</td><td>END</td></tr></table> <td> WRITTEN </td></tr>
How can I remove this extra cell?
Your "extra cell" is the space between the end of the cell with contents "END" and the parent cell containing your embedded tables. For your purpose, instead of embedding one table inside another you should use rowspan and colspan.
body {
background-color: black;
}
table,
tr,
td {
border-color: white;
border-style: solid;
border-width: 2px;
}
table {
border-collapse: collapse;
border-spacing: 3;
color: white;
float: center;
font-size: 20px;
text-transform: uppercase;
width: 25%;
}
<table>
<tr>
<td rowspan="2">PC</td>
<td rowspan="2">Instructions</td>
<td rowspan="2">Isused</td>
<td colspan="2">Execution</td>
<td rowspan="2">Written</td>
</tr>
<tr>
<td>Start</td>
<td>End</td>
</tr>
</table>
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>
I appear to be having an issue where I would like to place a dropdown 'expandable' option within my table. I've attempted to do this with Javascript, but it always seems to just add information to the right hand column.
I'm not great at HTML/CSS and am very open to any advice on cleaning up my webpage.
I don't want it to seem like I am just asking for someone to do it for me, I have attempted to do it many times but to no avail.
The idea is to have my table have a little 'v' in the right corner of each cell in 'My Modules' which, when clicked, displays more information about the 'module' within the table. (This is what each entry looks like in my table):
Here's some code that will get you started, you can start by adding a click event to an element with the class .expand. When this is clicked then you can toggle a hidden paragraph. I'll let you experiment with this...
I'd advise working on the user experience a little, but the basic mechanics are there.
$( document ).ready(function() {
$(".expand").click( function () {
// Show .description if hidden, hide if currently showing
$(this).closest("td").find(".description").toggle();
// A little bit of styling to show the user the content has been expanded
if ( $(this).hasClass("blue-text") ) {
$(this).removeClass("blue-text");
} else {
$(this).addClass("blue-text");
}
});
});
.description {
display:none;
}
.blue-text {
color: blue;
}
table {
font-family: arial, sans-serif;
width: 100%;
background-color: rgba(0, 0, 0, 0);
padding-top: 50px
}
td,
th {
border: 1px solid rgb(200, 200, 200);
text-align: center;
padding: 8px;
}
th {
font-weight: normal;
background-color: rgba(222, 222, 222, 0.6)
}
.modules th {}
tr:hover {
background-color: rgba(20, 91, 130, 0.3)
}
}
.collapsible {
background-color: #777;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active,
.collapsible:hover {
background-color: #555;
}
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th>Module ID</th>
<th width="70%">Module</th>
<th>Credits</th>
<th>Semester</th>
</tr>
<tr>
<td>PHIL01</td>
<td class="breakrow">
<p>Introduction to CS <span class="expand">▼</span></p>
<p class="description">
Some extra info here.
</p>
</td>
<td>20</td>
<td>Winter</td>
</tr>
<tr>
<td>PHIL01</td>
<td class="breakrow">
<p>Introduction to Uni <span class="expand">▼</span></p>
<p class="description">
Some extra info here.
</p>
</td>
<td>20</td>
<td>Winter</td>
</tr>
<tr>
<td>PHIL01</td>
<td class="breakrow">Introduction to German</td>
<td>20</td>
<td>Winter</td>
</tr>
<tr>
<td>PHIL01</td>
<td class="breakrow">Introduction to Philosophy</td>
<td>20</td>
<td>Winter</td>
</tr>
<tr>
<td>PHIL01</td>
<td class="breakrow">Introduction to Philosophy</td>
<td>20</td>
<td>Winter</td>
</tr>
<tr>
<td>PHIL01</td>
<td class="breakrow">Introduction to Philosophy</td>
<td>20</td>
<td>Winter</td>
</tr>
</table>
table td {
border: 1px solid black;
}
<table>
<thead>
<th>
col1
</th>
<th>
col2
</th>
</thead>
<tbody>
<tr>
<td>field1</td>
<td>field2</td>
</tr>
<tr>
<td colspan="2">The above row is number 1</td>
</tr>
<tr>
<td>field3</td>
<td>field4</td>
</tr>
<tr>
<td colspan="2">The above row is number 2</td>
</tr>
</tbody>
</table>
What I want?
Well I have this HTML code.
I want to put row description but without the use of a useless TR tag.
Reason:
I am sorting on the basis of column.
The column value is integer , and when I sort, all row description comes at bottom and field rows are sorted on top. But the row description should be attached to parent row.
Question:
How to attach it, so that after sort the table on basis of column, rows descriptions don't get spoiled ?
It's not an amazing solution, but you can try in this way:
<table>
<thead>
<th>
col1
</th>
<th>
col2
</th>
</thead>
<tbody>
<tr>
<td>
field1
</td>
<td>field2</td>
<td>
<div>
description
</div>
</td>
</tr>
<tr>
<td>field3</td>
<td>field4</td>
<td>
<div>
description
</div>
</td>
</tr>
</tbody>
</table>
css:
table,
thead,
tbody,
tr {
display: block;
clear: both;
}
table {
width: 130px;
}
thead {
height: 30px;
}
th,
td {
width: 60px;
float: left;
height: 30px;
border: 1px solid black;
}
td {
margin-top: 30px;
}
tr {
height: 60px;
position: relative;
}
tr td:last-child {
width: 0;
overflow: hidden;
border: none;
}
div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 30px;
line-height: 30px;
text-align: center;
}
https://jsfiddle.net/4xbbzzg5/
Please suggest how can i lock the headers in the table not to scroll. Find the sample code : http://jsfiddle.net/7t9qkLc0/14/ .
I want to lock Column1 and Column2 header so that when we scroll down to view the data the table headers are still visible.Thanks in advance.
My html code:
<div id="test" style="float: left; border: 0px solid #99ffff;">
<table cellpadding="2px" cellspacing="2px" style="border: 0px solid #ffffff; margin-right: 15px; margin-bottom: 20px;">
<tr>
<td>
<table cellpadding="2px" cellspacing="2px" style="border: 2px solid #657383; margin-bottom: 15px;" width="300px">
<tr>
<td colspan="3" style="padding-left: 0px; padding-right: 0px; padding-bottom: 0px">
<table width="300px" border="1" class="newTable">
<tr>
<th>Column1</th>
<th>Column2</th>
</tr>
<tr><td class="rowStyle">data 1</td>
<td class="rowStyle">data1 </td></tr>
<tr><td class="rowStyle">data 2</td>
<td class="rowStyle">data2</td></tr>
<tr><td class="rowStyle">data 3</td>
<td class="rowStyle">data3</td></tr>
<tr><td class="rowStyle">data 1</td>
<td class="rowStyle">data1 </td></tr>
<tr><td class="rowStyle">data 2</td>
<td class="rowStyle">data2</td></tr>
<tr><td class="rowStyle">data 1</td>
<td class="rowStyle">data1 </td></tr>
<tr><td class="rowStyle">data 2</td>
<td class="rowStyle">data2</td></tr>
<tr><td class="rowStyle">data 3</td>
<td class="rowStyle">data3</td></tr>
<tr><td class="rowStyle">data 3</td>
<td class="rowStyle">data3</td></tr>
</table></td></tr>
</table>
</td>
</tr>
</table>
</div>
You have to put your header in a seperate table and put a fixed position on it. Take a look at this.
http://jsfiddle.net/7t9qkLc0/47/
<table width="290px" border="1" class="newTable">
<tr>
<th>Column1</th>
<th>Column2</th>
</tr>
</table>
<table style="margin-top:25px">
<tr> ....
Try it like this:
Changed this in the HTML:
<th>Column1
<div>Column111</div>
</th>
<th>Column2
<div>Column222</div>
</th>
(The divs are new)
And add this CSS:
th {
height: 0;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
color: transparent;
border: none;
white-space: nowrap;
}
th div{
position: absolute;
background: blue;
color: #fff;
padding: 9px 25px;
top: 0;
line-height: normal;
border-left: 1px solid #800;
}
NOTE: The css is a little bit rough, but with a little bit styling it will look better
FIDDLE
Another way is to separate the headerline from the table and make them 2 elements.
you could assign the position:fixed; attribute to the th style and then style it to fit in with the table so positioning and overlapping is correct.
th {
position: fixed;
}
I also just found this link that answers your question http://jsfiddle.net/T9Bhm/7/
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.