We Keep Coding

Dropdown within table (CSS/HTML/Java)

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>

How to get value of draggable box's Place

How to get value of box which is draggable.
$(document).ready(function() {
$(".inputs div").draggable({
snap: ".spaces td div",
snapMode: "inner"
}).mousedown(function(){
var targets = $(".spaces td div");
targets.height(this.offsetHeight);
targets.width(this.offsetWidth);
targets.each(function(){
$(this).position({ of: this.parentNode });
});
});
});
*{border-collapse:collapse;}
tr {
border: 2px solid black;
}
table {
border: 2px solid black;
}
.inputs div {
float:left;
color:#004E66;
font-size:14px;
margin:2px;
padding:5px;
height:30px;
z-index: 2;
width:100px;
background-color:#f00;
}
.spaces td {
border: 2px solid black;
margin: 2px;
padding: 20px;
position: relative;
width: 100px;
}
.spaces td div {
height: 100%;
left: 0;
position: absolute;
text-align: center;
top: 0;
width: 100%;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="inputs">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<br/>
<table class="spaces">
<tr>
<td><div>06:00</div></td>
</tr>
<tr>
<td><div>07:00</div></td>
</tr>
<tr>
<td><div>08:00</div></td>
</tr>
<tr>
<td><div>09:00</div></td>
</tr>
<tr>
<td><div>10:00</div></td>
</tr>
<tr>
<td><div>11:00</div></td>
</tr>
<tr>
<td><div>12:00</div></td>
</tr>
</table>
So how to get value of placed box, Like if i place box in 6 and half then it should show me 6:30...
Actually I'm creating time selector like google as per following Image...

Fill Background Color entire TD

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>

Td left border not applying

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

jQuery: Change the border color of ONE table cell

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).