I am trying to apply border styling to td but its not showing left border,
It works fine in some browser but does not work on other.
HTML,
<table class="table-bordered">
<thead>
<tr>
<th>One</th>
<th>Tow</th>
<th>Three</th>
<th>Four</th>
<th>Five</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</tbody>
</table>
Interactions -
$("tbody > tr > td").on("hover", function (event) {
var columnIndex = $(this).index() + 1;
$(this).closest("tbody").find('tr td:nth-child(' + columnIndex + ')').toggleClass('bordered', event.type === "mouseenter");
$("table").find('tr th:nth-child(' + columnIndex + ')').toggleClass('coloured', event.type === "mouseenter");
});
CSS -
td.bordered {
border-right: 1px solid red;
border-left: 1px solid red;
}
th.coloured {
background: #e8e8e8;
color: black;
}
table {
width:100%;
border-collapse:collapse;
table-layout:auto;
vertical-align:top;
margin-bottom:15px;
border:1px solid #999999;
}
th {
font: bold 11px"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #F2EDEB;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
background: #522D25 url(images/bg_header.jpg) no-repeat;
}
tr {
background: #fff;
color: #261F1D;
}
tr:hover, tr.alt:hover {
color: #261F1D;
background-color: #E5C37E;
}
td {
border: 1px solid #000;
}
Testing environment Details
Google Chrome - Version 45.0.2454.85 m
Fiddle
Well I see that it is working fine for all the tds but you are not able to visualize it since right border of previous td is overlapping on left border of next td. You can identify it if you see the first td where both the borders get effected.
What I would suggest is try providing space between two tds and then I think you can visualize it properly. Not sure though whether padding or margin works on td.
UPDATE
As #Tushar said you can remove border-collapse property from table and below you can identify the changes.
DEMO
Related
I am trying to create some conditional formatting using JavaScript and HTML.
Basically I have a table with the following fields:
table
system
timestamp
total_amount
amount_used
amount_free
What I want based on the value of the column amount_free to change the colour of the field.
In this case if my column amount_free is 0 € then I want to have the red colour on my cell.
For that I am using the following code:
$(document).ready(function() {
$('#table_id td.amount_free').each(function() {
if ($(this).text() == '0 €') {
$(this).css('background-color', '#f00');
}
});
});
table,
td {
word-wrap: keep-all;
border: 1px solid black;
border-collapse: collapse;
}
table,
th {
border: 1px solid black;
}
th,
td {
padding: 3px;
}
,
th {
text-align: left;
}
,
th {
background-color: #f2f2f2;
}
,
td {
font-family: arial;
font-size: 10pt;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style=width:100%>
<tr>
<th>table</th>
<th>system</th>
<th>timestamp</th>
<th>total_amount</th>
<th>amount_used</th>
<th>amount_free</th>
</tr>
<tr>
<td>amount_values</td>
<td>users</td>
<td>2019-07-18 00:00:00</td>
<td>398 €</td>
<td>179 €</td>
<td>0 €</td>
</tr>
</table>
But it doesn't return any colour. Only the table without formating.
Can anyone help me?
$(document).ready(function() {
$('#table_id .amount_free_value').each(function() {
const value = $(this).text().split('€')[0];
if (value == 0) {
$(this).css('background-color', '#f00');
}
});
});
table,
td {
word-wrap: keep-all;
border: 1px solid black;
border-collapse: collapse;
}
table,
th {
border: 1px solid black;
}
th,
td {
padding: 3px;
}
,
th {
text-align: left;
}
,
th {
background-color: #f2f2f2;
}
,
td {
font-family: arial;
font-size: 10pt;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width:100%" id="table_id">
<tr>
<th>table</th>
<th>system</th>
<th>timestamp</th>
<th>total_amount</th>
<th>amount_used</th>
<th>amount_free</th>
</tr>
<tr>
<td>amount_values</td>
<td>users</td>
<td>2019-07-18 00:00:00</td>
<td>398 €</td>
<td>179 €</td>
<td class="amount_free_value">0 €</td>
</tr>
</table>
What you are trying to check is somehow wrong, you have the currency inside the text string. You don't have an id for the table and neither a class or some attribute on the amount_free value from the table.
You can do it in this way.
you have some typo in your code (style part), your table also miss the ID property and there's no TD with the amount_free class on it.
Try with:
<head>
<script type='text/javascript'>
$(document).ready(function(){
$('#table_id td.amount_free').each(function(){
if ($(this).text() == '0 €') {
$(this).css('background-color','#f00');
}
});
});
</script>
</head>
<br><br>
<style>
table, td {
word-wrap: keep-all;
border: 1px solid black;
border-collapse: collapse;
}
table, th {
border: 1px solid black;
}
th, td {
padding: 3px;
}
th {
text-align: left;
}
th {
background-color: #f2f2f2;
}
td{
font-family: arial;
font-size: 10pt;
}
</style>
<table style=width:100% id="table_id">
<tr>
<th>table</th>
<th>system</th>
<th>timestamp</th>
<th>total_amount</th>
<th>amount_used</th>
<th>amount_free</th>
</tr>
<tr>
<td>amount_values</td>
<td>users</td>
<td>2019-07-18 00:00:00</td>
<td>398 €</td>
<td>179 €</td>
<td class="amount_free">0 €</td>
</tr>
</table>
You need to provide id for table tag and class name for your specific td tag in your example. So your html code would be like below:
<!–– add id to table ––>
<table id="table_id" style=width:100%>
<tr>
<th>table</th>
<th>system</th>
<th>timestamp</th>
<th>total_amount</th>
<th>amount_used</th>
<th>amount_free</th>
</tr>
<tr>
<td>amount_values</td>
<td>users</td>
<td>2019-07-18 00:00:00</td>
<td>398 €</td>
<td>179 €</td>
<!–– add class to td ––>
<td class="amount_free">0 €</td>
</tr>
</table>
you are checking for a table with id table_id which doesn't exist. You are further checking a td-element with the class amount_free which also doesn't exist.
If you add ID and class then it will work.
$(document).ready(function() {
$('#table_id td.amount_free').each(function() {
if ($(this).text() == '0 €') {
$(this).css('background-color', '#f00');
}
});
});
table,
td {
word-wrap: keep-all;
border: 1px solid black;
border-collapse: collapse;
}
table,
th {
border: 1px solid black;
}
th,
td {
padding: 3px;
}
,
th {
text-align: left;
}
,
th {
background-color: #f2f2f2;
}
,
td {
font-family: arial;
font-size: 10pt;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width:100%" id="table_id">
<tr>
<th>table</th>
<th>system</th>
<th>timestamp</th>
<th>total_amount</th>
<th>amount_used</th>
<th>amount_free</th>
</tr>
<tr>
<td>amount_values</td>
<td>users</td>
<td>2019-07-18 00:00:00</td>
<td>398 €</td>
<td>179 €</td>
<td class="amount_free">0 €</td>
</tr>
</table>
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>
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 want to create a html table as below.
I tried everything like frame="hsides" rules="groups" etc.
Nothing seems to work. Any thoughts on this please?
UPDATE: Here is the code. I need less space between the columns and no line on the tbody.
<table class="grouped-columns-table" cellpadding="10" cellspacing="0">
<thead>
<tr>
<th>Col A1</th>
<th class=""></th><!-- SPACER -->
<th>Col A2</th>
<th class=""></th><!-- SPACER -->
<th>Col B1</th>
</tr>
</thead>
<tbody class="tb">
<tr>
<td>A1</td>
<td class="content-group-spacer"></td><!-- SPACER -->
<td>A2</td>
<td class="content-group-spacer"></td><!-- SPACER -->
<td>B1</td>
</tr>
<tr>
<td>A1</td>
<td class="content-group-spacer"></td><!-- SPACER -->
<td>A2</td>
<td class="content-group-spacer"></td><!-- SPACER -->
<td>B1</td>
</tr>
<tr>
<td>A1</td>
<td class="content-group-spacer"></td><!-- SPACER -->
<td>A2</td>
<td class="content-group-spacer"></td><!-- SPACER -->
<td>B1</td>
</tr>
</tbody>
</table>
.grouped-columns-table {
border-collapse: collapse;
}
.content-group {
border: 0;
}
.content-group-spacer {
width: 1px;
}
.grouped-columns-table td:not(.content-group-spacer) {
border: 0px solid #ccc;
border-collapse: collapse;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-top: 0px solid #ccc;
border-bottom: 0px solid #ccc;
}
tbody {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
You are massively over complicating this. Get rid of the presentational HTML (including the data cells with no data in them).
You just need to set border-spacing so you have space between your cells where you want them, and then set borders around the edges of the cells you want borders on.
.grouped-columns-table {
border-collapse: seperate;
border-spacing: 10px 0;
}
.grouped-columns-table tbody tr > * {
border-left: solid black 1px;
border-right: solid black 1px;
}
.grouped-columns-table tbody tr:first-child td {
border-top: solid black 1px;
}
.grouped-columns-table tbody tr:last-child td {
border-bottom: solid black 1px;
}
<table class="grouped-columns-table">
<thead>
<tr>
<th>Col A1</th>
<th>Col A2</th>
<th>Col B1</th>
</tr>
</thead>
<tbody class="tb">
<tr>
<td>A1</td>
<td>A2</td>
<td>B1</td>
</tr>
<tr>
<td>A1</td>
<td>A2</td>
<td>B1</td>
</tr>
<tr>
<td>A1</td>
<td>A2</td>
<td>B1</td>
</tr>
</tbody>
</table>
You can do it using first-child and last-child selectors, see fiddle: https://jsfiddle.net/snpsp6as/1/
.tb > tr:last-child > td{border-bottom: 1px solid #ccc;}
.tb > tr:last-child > .content-group-spacer{border-bottom: none !important;}
.tb > tr:first-child > td{border-top: 1px solid #ccc;}
.tb > tr:first-child > .content-group-spacer{border-top: none !important;}
I have a simple HTML table of options here:
<table>
<tr>
<td>blue</td>
<td>green</td>
</tr>
<tr>
<td>red</td>
<td>cream</td>
</tr>
</table>
The CSS with the relevant styles:
td { background-color: #FFF; border: 1px solid #3F3F3F; cursor: pointer; }
td.selected { color: #D93A2C; border: 1px solid #D93A2C; }
Looks like this:
When I click on one of the table cells, I want the border and text to be red. So I use jQuery to toggle the '.selected' class using the following code.
$('td').each(function(){
$(this).click(function(){
$(this).toggleClass('selected');
});
});
However the result is this:
The first table cell (blue) is the only one that looks as I want when selected. I need all the borders of the selected cell to be highlighted.
Any ideas on how to achieve this? I'm not opposed to ditching tables if someone can suggest a better way.
This works nicely for me:
<style type="text/css">
table { border: 1px solid #000; border-collapse: collapse; }
td { border-top: 1px solid #000; border-left: 1px solid #000; }
td.selected { border: 1px solid #F00; }
</style>
<table>
<tr>
<td>blue</td>
<td>green</td>
</tr>
<tr>
<td>red</td>
<td class="selected">yellow</td>
</tr>
</table>
Here is a very hack'ish way of getting the job done, might spark an idea on your end to produce something better... I've not fully tested it across browsers but worked on IE8,chrome,FF. Live example
HTML
<table>
<tbody>
<tr>
<td>XYZ</td>
<td>asdf</td>
<td>2346</td>
</tr>
<tr>
<td>XYZ</td>
<td>asdf</td>
<td>2346</td>
</tr>
<tr>
<td>XYZ</td>
<td>asdf</td>
<td>2346</td>
</tr>
</tbody>
</table>
JS
$('td').each(function(){
$(this).click(function(){
$(this).toggleClass('selected');
$(this).prev('td').css('border-right','#ff0000');
$(this).parent().prev('tr').find('td:nth-child('+(this.cellIndex+1)+')').css('border-bottom','#ff0000')
});
});
CSS
table{
border-collapse: collapse;
}
td { border: 1px solid #ccc; padding:3px }
.selected{
border-color:#ff0000;
color:#ff0000;
}
.selected-bottom{
border-bottom-color:#ff0000;
}
.selected-right{
border-right-color:#ff0000;
}
It's easier to put a DIV in each cell then add the treatment to the DIV.
The CSS outline may be useful here, as it may be on top of other borders (which is the problem here).