I want to put percent at the right in 2 rows cell, but seems like something wrong here:
<table>
<tr>
<td>
<b style="color: #333;margin-left: 65px;">True Negative</b>
</td>
</tr>
<tr>
<td style="border-top: 2px black solid;">
<b style="color: #333;">(True Negative + False Positive)</b>
</td>
<td rowspan="2">
<b style="color: #333;">x 100 %</b></td>
</tr>
</table>
https://jsfiddle.net/8cr7ergj/
rowspan is the span of rows starting with the current. As your cell is in the last row, there is no other row it could span to. I think, you want something more like this:
<table>
<tr>
<td>
<b style="color: #333;margin-left: 65px;">True Negative</b>
</td>
<td rowspan="2">
<b style="color: #333;">x 100 %</b>
</td>
</tr>
<tr>
<td style="border-top: 2px black solid;">
<b style="color: #333;">(True Negative + False Positive)</b>
</td>
</tr>
</table>
Like that ?
https://jsfiddle.net/qnxorbx3/
<table>
<tr>
<td>
<b style="color: #333;margin-left: 65px;">True Negative</b>
</td>
<td rowspan="2">
<b style="color: #333;">x 100 %</b></td>
</tr>
</tr>
<tr>
<td style="border-top: 2px black solid;">
<b style="color: #333;">(True Negative + False Positive)</b>
</td>
</table>
Related
My code has the following lines:
<div class="verizon-data-duplicate-device-key-89148000004605691537 k-content k-state-active" style="float: left; opacity: 1; display: block;" id="3cf455cc-9777-446b-b733-c60795e419e7-3" role="tabpanel" aria-expanded="true">
<table style="border-collapse: collapse; padding: 3px; border: 1px solid grey;">
<tbody>
<tr>
<td colspan="2">
Verizon Information:
</td>
</tr>
<tr>
<td style="text-align:right;">
Account Name
</td>
<td>
<span>0442047510-00001</span><br>
<span>0442047510-00001</span><br>
</td>
</tr>
<tr>
<td style="text-align:right;">
Billing Cycle End Date
</td>
<td>
<span>2021-07-01T00:00:00</span><br>
<span>2022-01-12T00:00:00</span><br>
</td>
</tr>
<tr>
<td style="text-align:right;">
Carrier Name
</td>
<td>
<span>null</span><br>
<span>null</span><br>
</td>
</tr>
<tr>
<td style="text-align:right;">
Service Plan
</td>
<td>
<span>40515x48526x75802x84777</span><br>
<span>M2MPublicDynamic</span><br>
</td>
</tr>
</tbody>
</table>
</div>
page has many different with different class value keys:
div class="verizon-data-duplicate-device-key-**89148000004605691537** k-content k-state-active"
where 89148000004605691537 is variable
I want to change text color to red for cases, when values inside span for the same td is different.
E.g.:
<td>
<span>2021-07-01T00:00:00</span><br>
<span>2022-01-12T00:00:00</span><br>
</td>
should be red
but
<td>
<span>0442047510-00001</span><br>
<span>0442047510-00001</span><br>
</td>
should not be red.
And compares should be inside only the same td.
Any css classes can be added.
How to implement it?
$("table td").map(function(e) {
if($(this).children("span").length){
if($(this).children("span").contents()[0].textContent != $(this).children("span").contents()[1].textContent){
$(this).addClass("text-danger");
}
}
});
.text-danger {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="verizon-data-duplicate-device-key-89148000004605691537 k-content k-state-active" style="float: left; opacity: 1; display: block;" id="3cf455cc-9777-446b-b733-c60795e419e7-3" role="tabpanel" aria-expanded="true">
<table style="border-collapse: collapse; padding: 3px; border: 1px solid grey;" border="1">
<tbody>
<tr>
<td colspan="2">
Verizon Information:
</td>
</tr>
<tr>
<td style="text-align:right;">
Account Name
</td>
<td>
<span>0442047510-00001</span><br>
<span>0442047510-00001</span><br>
</td>
</tr>
<tr>
<td style="text-align:right;">
Billing Cycle End Date
</td>
<td>
<span>2021-07-01T00:00:00</span><br>
<span>2022-01-12T00:00:00</span><br>
</td>
</tr>
<tr>
<td style="text-align:right;">
Carrier Name
</td>
<td>
<span>null</span><br>
<span>null</span><br>
</td>
</tr>
<tr>
<td style="text-align:right;">
Service Plan
</td>
<td>
<span>40515x48526x75802x84777</span><br>
<span>M2MPublicDynamic</span><br>
</td>
</tr>
</tbody>
</table>
</div>
//searches cells containing two spans
//if the two spans don't have the same text content, add the class to
//the spans to color the text red
$('td').each(function(){
const $td = $(this);
const $spans = $td.find('span');
if($spans.length === 2){
if($spans[0].textContent !== $spans[1].textContent){
$spans[0].classList.add('color-red');
$spans[1].classList.add('color-red');
}
}
});
.color-red{
color:red;
}
<div class="verizon-data-duplicate-device-key-89148000004605691537 k-content k-state-active" style="float: left; opacity: 1; display: block;" id="3cf455cc-9777-446b-b733-c60795e419e7-3" role="tabpanel" aria-expanded="true">
<table style="border-collapse: collapse; padding: 3px; border: 1px solid grey;">
<tbody>
<tr>
<td colspan="2">
Verizon Information:
</td>
</tr>
<tr>
<td style="text-align:right;">
Account Name
</td>
<td>
<span>0442047510-00001</span><br>
<span>0442047510-00001</span><br>
</td>
</tr>
<tr>
<td style="text-align:right;">
Billing Cycle End Date
</td>
<td>
<span>2021-07-01T00:00:00</span><br>
<span>2022-01-12T00:00:00</span><br>
</td>
</tr>
<tr>
<td style="text-align:right;">
Carrier Name
</td>
<td>
<span>null</span><br>
<span>null</span><br>
</td>
</tr>
<tr>
<td style="text-align:right;">
Service Plan
</td>
<td>
<span>40515x48526x75802x84777</span><br>
<span>M2MPublicDynamic</span><br>
</td>
</tr>
</tbody>
</table>
</div>
<script
src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI="
crossorigin="anonymous"></script>
<tr style="background-color:yellow">
<td style="color:red font-weight:bold">
SERVER1
</td>
<td style="color:red">
Sampler
</td>
<td style="color:red">
Offline
</td>
<td style="color:red">
No
</td>
</tr>
Can anyone please tell me why my text isn't bold and red? if I use 1 css style then it seems to work fine
You need to end your style property with a semicolon ; if you have multiple properties.
<tr style="background-color:yellow;">
<td style="color:red; font-weight:bold;">
SERVER1
</td>
<td style="color:red;">
Sampler
</td>
<td style="color:red;">
Offline
</td>
<td style="color:red;">
No
</td>
</tr>
I want the third column of the table to have a dark blue border. I don't know if it possible to do with one line, but my code works only if I set the border to 2px. With 1px the left border's color is the same as the other cells'.
Here is a jsfiddle: http://jsfiddle.net/Fe3Ya/
HTML:
<table>
<tr>
<th class="empty" rowspan="3">
</th>
<th>
<p><span class="title">Basic</span></p>
</th>
<th>
<p><span class="title">Standard</span></p>
</th>
<th class="popular">
<p><span>Plus</span></p>
</th>
<th>
<p><span class="title">Solid</span></p>
</th>
</tr>
<tr>
<td>
<span class="subtitle">$19</span>
</td>
<td>
<span class="subtitle">$49</span>
</td>
<td class="popular">
<span class="subtitle">$99</span>
</td>
<td>
<span class="subtitle">$149</span>
</td>
</tr>
<tr class="odd">
<td>
<span class="col">per month</span>
</td>
<td>
<span class="col">per month</span>
</td>
<td class="popular_2">
<span class="col_popular">per month</span>
</td>
<td>
<span class="col">per month</span>
</td>
</tr>
<tr>
<td>
<span class="row">Best for</span>
</td>
<td>
<span class="col">Starters</span>
</td>
<td>
<span class="col">Fast growers</span>
</td>
<td class="popular">
<span class="col">Most Popular</span>
</td>
<td>
<span class="col">Large companies</span>
</td>
</tr>
<tr class="odd">
<td>
<span class="row">Users</span>
</td>
<td>
<span class="col">10</span>
</td>
<td>
<span class="col">30</span>
</td>
<td class="popular_2">
<span class="col_popular">100</span>
</td>
<td>
<span class="col">Unlimited</span>
</td>
</tr>
<tr>
<td>
<span class="row">Forms</span>
</td>
<td>
<span class="col">5</span>
</td>
<td>
<span class="col">10</span>
</td>
<td class="popular">
<span class="col">30</span>
</td>
<td>
<span class="col">Unlimited</span>
</td>
</tr>
<tr class="odd">
<td>
<span class="row">Reports</span>
</td>
<td>
<span class="col">10</span>
</td>
<td>
<span class="col">30</span>
</td>
<td class="popular_2">
<span class="col_popular">100</span>
</td>
<td>
<span class="col">Unlimited</span>
</td>
</tr>
<tr>
<td>
<span class="row">Entries</span>
</td>
<td>
<span class="col">100</span>
</td>
<td>
<span class="col">500</span>
</td>
<td class="popular">
<span class="col">Unlimited</span>
</td>
<td>
<span class="col">Unlimited</span>
</td>
</tr>
<tr class="odd">
<td>
<span class="row">SSL Encryption</span>
</td>
<td>
<span class="col">Up to 128-bit</span>
</td>
<td>
<span class="col">Up to 128-bit</span>
</td>
<td class="popular_2">
<span class="col_popular">Up to 256-bit</span>
</td>
<td>
<span class="col">Up to 256-bit</span>
</td>
</tr>
<tr>
<td>
<span class="row">Bandwith</span>
</td>
<td>
<span class="col">Unlimited</span>
</td>
<td>
<span class="col">Unlimited</span>
</td>
<td class="popular">
<span class="col">Unlimited</span>
</td>
<td>
<span class="col">Unlimited</span>
</td>
</tr>
<tr class="odd">
<td>
<span class="row">Storage</span>
</td>
<td>
<span class="col">2GB</span>
</td>
<td>
<span class="col">10GB</span>
</td>
<td class="popular_2">
<span class="col_popular">100GB</span>
</td>
<td>
<span class="col">Unlimited</span>
</td>
</tr>
<tr class="signup">
<td>
</td>
<td>
Sign up
</td>
<td>
Sign up
</td>
<td class="popular_bottom">
Sign up
</td>
<td>
Sign up
</td>
</tr>
</table>
CSS:
table {
border-collapse:collapse;
font-family: Calibri;
text-align:center;
margin-left:auto;
margin-right:auto;
}
/*first row*/
table th {
background: #BBCDF1;
padding:5px;
width:150px;
text-align:center;
}
table th.popular {
background: #36609F;
color:#FFFFFF;
border-left:1px solid #36609F;
border-right:1px solid #36609F;
border-top:1px solid #36609F;
text-align:center;
font-size: 21px;
}
th, td {
border:1px solid #D7D7D7;
}
/*second and third rows*/
span.title {
font-size: 21px;
color: #242424;
}
span.subtitle{
font-size:24px;
font-weight:bold;
color: #245B8B;
}
/*rest of the rows*/
table td {
width:150px;
padding:5px;
background:#FFFFFF;
}
table td.popular, td.popular_2, td.popular_bottom{
border-left:1px solid #8398C4;
border-right:1px solid #8398C4;
}
table td.popular{
background-color:#F3F7FE;
}
table tr.odd td.popular_2{
background-color:#8398C4;
}
table td.popular_bottom {
border-bottom:1px solid #8398C4;
}
table tr.odd td{
background-color:#D8E3F9;
}
th.empty{ /* left-top box */
background-color:#F6FAFF;
border-left:0;
border-top:0;
}
span.col {
color:#727272;
}
span.col_popular {
color:#FFFFFF;
}
Maybe the css nth-child() selector could be a solution but it doesn't work in IE8.
The problem is caused by border conflict resolution rules for the collapsing border model. In particular, the rules say that when a border is shared by two cells, then, other things being equal, “the one further to the left (if the table's 'direction' is 'ltr'; right, if it is 'rtl') and further to the top wins.” So the right border of the cell in the preceding column takes preference.
To defeat this, you can set border-right: none on the relevant cells in the preceding column. The details depend on what borders you want to be there and how you wish to modify the HTML markup to make such styling convenient.
I want to create a normal table. But I need to put two fields in one row.
So, I used rowspan and expected to have a two row table, but with a space of fourth.
But, it's showed in only one line.
I revised, and look for something wrong, but I dont unerstaing.
When I remove the rowspan, everything looks normal, but I need the rowspan.
Why is render in one row?
<table class="table table-bordered">
<tbody>
<tr class="warning" >
<td rowspan="2" >100</td>
<td rowspan="2">87</td>
<td rowspan="2">FERNANDO RODRIGUEZ</td>
<td rowspan="2"></td>
<td rowspan="2">MARIANO ORTEGA SANCHEZ</td>
<td rowspan="2" > </td>
<td rowspan="2" > </td>
<td rowspan="2">
<span class="label label-info">
Importacion
Sencillo
</span>
</td>
<td rowspan="2"> Monterrey </td>
<td rowspan="2" ></td>
<td rowspan="2" ></td>
<td rowspan="2" ></td>
<td rowspan="2">
<a href="/TimsaLzc/web/app_dev.php/main/fleteDetalle/100" >
<button class="btn btn-success">Detalles</button>
</a>
</td>
</tr>
<tr class="warning" >
<td rowspan="2" >101</td>
<td rowspan="2">82</td>
<td rowspan="2">IVAN CORTES</td>
<td rowspan="2"></td>
<td rowspan="2">MARIANO ORTEGA SANCHEZ</td>
<td rowspan="2" > </td>
<td rowspan="2" > </td>
<td rowspan="2">
<span class="label label-info">
Importacion
Sencillo
</span>
</td>
<td rowspan="2"> Nissan Mexico </td>
<td rowspan="2" ></td>
<td rowspan="2" ></td>
<td rowspan="2" ></td>
<td rowspan="2">
<a href="/TimsaLzc/web/app_dev.php/main/fleteDetalle/101" >
<button class="btn btn-success">Detalles</button>
</a>
</td>
</tr>
</tbody>
</table>
This is a picture of my app in action, and the reason of my question.
https://www.dropbox.com/s/1luaxgg4yesm8re/result.png
Replace the rowspans with colspans. For example:
<td colspan="2">
(...)
</td>
EDIT:
Still not 100% sure what you're trying to achieve but as far as I believe you might want to:
remove rowspan from all the td's that are meant to be two-rowed.
add and additional <tr></tr> after each tr and fill it with a number of tds equal to number of cells with rowspan.
I just had a similar problem, try adding an empty Row at the end of the missbehaving Row something like this:
<table class="table table-bordered">
<tbody>
<tr class="warning" >
<td rowspan="2" >100</td>
<td rowspan="2">87</td>
<td rowspan="2">FERNANDO RODRIGUEZ</td>
<td rowspan="2"></td>
<td rowspan="2">MARIANO ORTEGA SANCHEZ</td>
<td rowspan="2" > </td>
<td rowspan="2" > </td>
<td rowspan="2">
<span class="label label-info">
Importacion
Sencillo
</span>
</td>
<td rowspan="2"> Monterrey </td>
<td rowspan="2" ></td>
<td rowspan="2" ></td>
<td rowspan="2" ></td>
<td rowspan="2">
<a href="/TimsaLzc/web/app_dev.php/main/fleteDetalle/100" >
<button class="btn btn-success">Detalles</button>
</a>
</td>
</tr>
<tr /> <!--magic goes here-->
<tr class="warning" >
<td rowspan="2" >101</td>
<td rowspan="2">82</td>
<td rowspan="2">IVAN CORTES</td>
<td rowspan="2"></td>
<td rowspan="2">MARIANO ORTEGA SANCHEZ</td>
<td rowspan="2" > </td>
<td rowspan="2" > </td>
<td rowspan="2">
<span class="label label-info">
Importacion
Sencillo
</span>
</td>
<td rowspan="2"> Nissan Mexico </td>
<td rowspan="2" ></td>
<td rowspan="2" ></td>
<td rowspan="2" ></td>
<td rowspan="2">
<a href="/TimsaLzc/web/app_dev.php/main/fleteDetalle/101" >
<button class="btn btn-success">Detalles</button>
</a>
</td>
</tr>
<tr /> <!--magic goes here-->
</tbody>
</table>
It worked for me :)
Following is the code of table :
<table cellpadding="0" cellspacing="" width="100%" border="0">
<tbody>
<tr class="pack_list_divider">
<td width="30%" rowspan="2">
<img id="coursimg" src="test_listings_files/default_package_image.png" alt="Section wise test" border="0">
</td>
<td width="25%">
<p class="pckgvalidity">
Validity : 1 Year
</p>
</td>
<td width="35%">
<p class="pckgvalidity">Number of Tests : 0
</p>
</td>
<td width="20%" valign="middle">
<!--<p id="test_list_loader" height="20" align="center" style="display:none;"></p> -->
Test Details
</td>
</tr>
<tr>
<td colspan="2" width="50%" valign="top">
<p class="descp">
sectionm wise tests
</p>
</td>
<td width="20%">
<p class="pckgrs"> <span class="rs fl" style="color:#333333; font:25px bold; margin:0px 0px 10px 10px;"> Free </span>
<span>
<a class="user-not-loggedin more addcart fl" href="http://localhost/entrance_prime/Entrance_Prime/entprm/web/my_cart.php?pack_id=21e86b3ebf6a8af2a9fcf136c4f8e88a&pack_type=test&op=aa" id="21e86b3ebf6a8af2a9fcf136c4f8e88a" value="21e86b3ebf6a8af2a9fcf136c4f8e88a" style="background:url(../images_new/add_account.png) 0 0 no-repeat;"> </a>
</span>
</p>
</td>
</tr>
</tbody>
</table>
I want a horizontal line in between the rows. I've tried so many tricks but none of them did the magic for me. How can this issue be resolved?
I use this trick:
<table>
<tr style="border-bottom:1px solid black">
<td colspan="100%"></td>
</tr>
<tr> ... </tr>
</table>
Use a Table Header and add the underline in there
table { border-collapse:collapse; }
table thead th { border-bottom: 1px solid #000; }
<table>
<thead>
<tr>
<th>Valididty></th>
<th>No Of Tests</th>
</tr>
</thead>
<tbody>
<tr>
<td>Test</td>
<td>Test</td>
</tr>
</tbody>
</table>
With CSS you can style the header row. Make each cell have a bottom border.
have a look here: http://jsfiddle.net/ZmBmh/
HTML
<table>
<tr class="firstLine">
<td>hey</td><td>hello</td><td>yuhuu</td>
</tr>
<tr>
<td>hey</td><td>hello</td><td>yuhuu</td>
</tr>
<tr>
<td colspan="3"><hr/></td>
</tr>
<tr>
<td>hey</td><td>hello</td><td>yuhuu</td>
</tr>
</table>
CSS
table{
border-collapse: collapse;
}
.firstLine td{
border-bottom: 2px solid black;
}
Something like this:
<table border="1" cellpadding="0" cellspacing="" width="100%">
<tbody>
<tr class="pack_list_divider">
<tr> </tr>
<td width="25%">
<p class="pckgvalidity">
Validity : 1 Year
</p>
</td>
<td width="35%">
<p class="pckgvalidity">Number of Tests : 0
</p>
</td>
<td width="20%" valign="middle">
<!--<p id="test_list_loader" height="20" align="center" style="display:none;"></p> -->
Test Details
</td>
</tr>
<tr>
<td colspan="2" width="50%" valign="top">
<p class="descp">
sectionm wise tests
</p>
</td>
<td width="20%">
<p class="pckgrs"> <span class="rs fl" style="color:#333333; font:25px bold; margin:0px 0px 10px 10px;"> Free </span>
<span>
<a class="user-not-loggedin more addcart fl" href="http://localhost/entrance_prime/Entrance_Prime/entprm/web/my_cart.php?pack_id=21e86b3ebf6a8af2a9fcf136c4f8e88a&pack_type=test&op=aa" id="21e86b3ebf6a8af2a9fcf136c4f8e88a" value="21e86b3ebf6a8af2a9fcf136c4f8e88a" style="background:url(../images_new/add_account.png) 0 0 no-repeat;"> </a>
</span>
</p>
</td>
</tr>
</tbody>
</table>
Tell me if that is what you're looking for.