Develop Reference

How to reduce one column and increase other one in CSS?

I am trying to set width:13% of Date column. But it doesn't work in my way. Where is the problem? and can't reduce width of subject column. Thanks in advance.
Check FIDDLE
<div style="width:70%;float:left;">
<div>
<table style="width:100%;" class="TicketsDashboard">
<tbody>
<tr>
<td style="width:13%"><b>Date</b></td>
<td ><b>Type</b></td>
<td ><b>Subject</b></td>
<td ><b>Responsible</b></td>
<td ><b>Action</b></td>
</tr>
<tr style="cursor:pointer;" onclick="openDetailDiv('PROT-155',124)">
<td>2019-07-21 12:52:08</td>
<td>Recommendation</td>
<td>First Subject going on perfectly edited</td>
<td>perfect</td>
<td class="editButtonMain">Edit</td>
</tr>
<tr style="cursor:pointer;" onclick="openDetailDiv('PROT-155',125)">
<td>2019-07-21 12:53:26</td>
<td>Decision</td>
<td>lklk kdj djjdjdjdjdjdjdjdjdjdjdjdjdjdjjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdj</td>
<td>bangldesh</td>
<td class="editButtonMain">Edit</td>
</tr>
</tbody>
</table>
</div>
<br>
<div id="ticketButtons"><input type="button" class="Btn" onclick="openDiag({function: "item", id: 155, dialogTitle: this.value})" value="Add Protocol Item"></div>
</div>
<div style="width:30%;float:left">
<table style="width:100%;" class="lightborder" id="headTable">
<tbody>
<tr id="slaTr">
<td width="100" valign="top">SLA:</td>
<td>
<div id="effortDiv" style="width:50%;float:left;text-align:center;padding-bottom:10px;display:none"></div>
<div id="timeDiv" style="text-align:center;padding-bottom:10px;display:none"></div>
</td>
</tr>
<tr>
<td width="100">Status:</td>
<td id="statusTd">Suggestion</td>
</tr>
<tr>
<td>Protocol Number:</td>
<td id="breadCrumb">PROT-155</td>
</tr>
<tr>
<td>Subject:</td>
<td id="protsubject">Chonchol -- test</td>
</tr>
<tr>
<td>Start Date:</td>
<td id="protstartdate">0000-00-00 00:00:00</td>
</tr>
<tr>
<td>End Date:</td>
<td id="protenddate">0000-00-00 00:00:00</td>
</tr>
<tr>
<td>Keeper:</td>
<td id="protkeeper">ewrwer</td>
</tr>
</tbody>
</table>
</div>

your subject column is going out because u didn't used space in this code <td>lklk kdj djjdjdjdjdjdjdjdjdjdjdjdjdjdjjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdj</td> if you want to be stop exceeding you can give space like this <td>lklk kdj djjdjdjdjdjd jdjdjdjdjdjdjdj djjdjdjdjdjdjdj djdjdjdjdjdjdjdjdjdjdjdj djdjdjdjdjdjdjdjdjdjdjdjdjdjdj</td>
What actually you wanted to get let us know clearly.

To increase the width of td
instead of <td style="width:13%"> give <td style="padding-left:13%">
To avoid the overflow
add
<style>
table { table-layout:fixed; }
table td {word-wrap:break-word;}
</style>
Thanks,

the reason of it, you should set the same style for the given column in every rows, or add a thead section in which you set it once of the column.

Javascript Select anchors with attributes that contain word

I am trying to only select a specific set of links in a table. I figure that the best way to do it is by selecting them by the title attribute that contains all contain the word 'ULD'.
Here is my code the allowed me to narrow it down to all links in a table but no further. I tried querySelectorAll() and selectElementsbyTitle but had no luck. Also keep in mind this needs to work in IE11 and no JQuery.
var tabl = document.getElementById("Func15543_tblMissedBagReport");var anchors = tabl.getElementsByTagName("a");
Here are the links I want to select out of the following table:
<A
CLASS="ESR-Ajax"
TITLE="View ULD B1769SELAZ5 detail"
HREF="Javascript:void(0)"
AJAX-FUNCTION="Shared_ULDDetail"
intMasterReferenceNumber="5433550294352748012"
intULDReferenceNumber="-5893118207572745590"
strULDTypeCode="01"
dtmReportDate="2018-12-14"
intPageNumber="1">
B1769SELAZ5
</A>
Here is a sample of the table:
Missed Bag Report
<img src="../Content/images/icons/excel.gif" border="0" alt="Click to export to excel." title="Click to export to excel." height="13" width="13">
</a>
</SPAN>
<SPAN CLASS="CaptionRight">
<SPAN ID="Func15543_PagingControlOne"></SPAN>
</SPAN>
</CAPTION>
<THEAD>
<TR>
<TH ROWSPAN="2">#</TH>
<TH COLSPAN="5">Destination</TH>
<TH ROWSPAN="2">Load<BR>Create<BR>Sort</TH>
<TH ROWSPAN="2">Bag Close Time</TH>
<TH ROWSPAN="2">Age > 90 min (Red)</TH>
<TH ROWSPAN="2">Bag Tag #</TH>
<TH ROWSPAN="2">Pkgs<BR>in<BR>Bag</TH>
</TR>
<TR>
<TH>Cntry<BR>Code</TH>
<TH>SLIC</TH>
<TH>Sort</TH>
<TH>Serv Lvl</TH>
<TH>Location</TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TD CLASS="CenterText ">1</TD>
<TD CLASS="CenterText ">US</TD>
<TD CLASS="CenterText ">4009 </TD>
<TD CLASS="CenterText ">D</TD>
<TD CLASS="CenterText ">2DA</TD>
<TD CLASS="CenterText ">GRADE LANE HUB </TD>
<TD CLASS="CenterText ">T</TD>
<TD CLASS="CenterText ">
12/14/18 4:12 PM
</TD>
<TD CLASS="WhiteText CenterText G_CLR_Green5 ">
56 Mins. Old
</TD>
<TD CLASS="CenterText ">
<A
CLASS="ESR-Ajax"
TITLE="View ULD B1769SELAZ5 detail"
HREF="Javascript:void(0)"
AJAX-FUNCTION="Shared_ULDDetail"
intMasterReferenceNumber="5433550294352748012"
intULDReferenceNumber="-5893118207572745590"
strULDTypeCode="01"
dtmReportDate="2018-12-14"
intPageNumber="1">
B1769SELAZ5
</A>
</TD>
<TD class="CenterText "> 6</TD>
</TR>
<TR>
<TD CLASS="CenterText G_CLR_6">2</TD>
<TD CLASS="CenterText G_CLR_6">US</TD>
<TD CLASS="CenterText G_CLR_6">0759 </TD>
<TD CLASS="CenterText G_CLR_6">N</TD>
<TD CLASS="CenterText G_CLR_6">GRD</TD>
<TD CLASS="CenterText G_CLR_6">SADDLEBROOK </TD>
<TD CLASS="CenterText G_CLR_6">T</TD>
<TD CLASS="CenterText G_CLR_6">
12/14/18 4:15 PM
</TD>
<TD CLASS="WhiteText CenterText G_CLR_Green5">
53 Mins. Old
</TD>
<TD CLASS="CenterText G_CLR_6">
<A
CLASS="ESR-Ajax"
TITLE="View ULD B1769SEL3I0 detail"
HREF="Javascript:void(0)"
AJAX-FUNCTION="Shared_ULDDetail"
intMasterReferenceNumber="5433550294352748012"
intULDReferenceNumber="8922482455613715109"
strULDTypeCode="01"
dtmReportDate="2018-12-14"
intPageNumber="1">
B1769SEL3I0
</A>
</TD>
<TD class="CenterText G_CLR_6"> 6</TD>
</TR>

You can use querySelectorAll with an attribute selector [attr] and a contains flag *=:
var table = document.querySelector('table');
var links = table.querySelectorAll('a[title*="ULD"]');
console.log(links);
<table>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</table>

jquery sorting with each element of itsown

So here is my Concern. I am trying to sort the data i have in the following format so that every parent elemnts has child elments and when the sort is selected for that, it should only sort its childrens
The Code for this is:
<!--- first list --->
<tr>
<td colspan="2"><li class="childrens" data-id="99" style="list-style:none;margin-left:0px;"> <strong style="font-size:16px;">Information</strong> [Desc] </li></td>
</tr>
<tr>
<td colspan="2"><li data-id="81" style="margin-left:20px;"> Running </li></td>
</tr>
<tr>
<td colspan="2"><li data-id="113" style="margin-left:40px;"> Coping</li></td>
</tr>
<tr>
<td colspan="2"><li data-id="71" style="margin-left:40px;"> Printing </li></td>
</tr>
<tr>
<td colspan="2"><li data-id="65" style="margin-left:20px;"> references </li></td>
</tr>
<!--- Second List --->
<tr>
<td colspan="2"><li class="childrens" data-id="85" style="list-style:none;margin-left:0px;"> <strong style="font-size:16px;">Papers</strong> [Desc] </li></td>
</tr>
<tr>
<td colspan="2"><li data-id="116" style="margin-left:20px;"> Opening </li></td>
</tr>
<tr>
<td colspan="2"><li data-id="109" style="margin-left:20px;"> Closng </li></td>
</tr>
what i am trying is: when i click the desc of the first list, it should only the elements which are under the first list using data-id
same for second list ..
both lists should work independently and sorting should be on heir own, i gave a shot but not successful
here is my code
function sortdesc(){
$('li.childrens').sort(function(a,b){
return parseInt(a.getAttribute('data-id'),10)-parseInt(b.getAttribute('data-id'),10)
});
}
$(document).on('click',".sort",function(e) {
sortdesc();
});
tried here in fiddle but no luck [updated to add table to each li]
http://jsfiddle.net/HWmz3/85/

According to this answer:
function sortdesc(elem) {
// get the table of the clicked link, find its tbody
var $tbody = $(elem).closest('table').find('tbody');
// sort the tr of this tbody
$tbody.find('tr')
.sort(function(a, b) {
var a = $(a).find('li'); // get the li of a tr
var b = $(b).find('li'); // get the li of b tr
return a.data('id') < b.data('id') ? -1 : 1; // compare and return the result
})
.appendTo($tbody); // to make the sort
}
$(document).on('click', ".sort", function(e) {
// pass the link that was clicked to the function:
sortdesc(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--- first list --->
<table>
<thead>
<tr>
<td colspan="2">
<li class="childrens" data-id="99" style="list-style:none;margin-left:0px;"> <strong style="font-size:16px;">Information</strong> [Desc]
</li>
</td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">
<li data-id="81" style="margin-left:20px;">Running</li>
</td>
</tr>
<tr>
<td colspan="2">
<li data-id="113" style="margin-left:40px;">Coping</li>
</td>
</tr>
<tr>
<td colspan="2">
<li data-id="71" style="margin-left:40px;">Printing</li>
</td>
</tr>
<tr>
<td colspan="2">
<li data-id="65" style="margin-left:20px;">references</li>
</td>
</tr>
</tbody>
</table>
<!--- Second List --->
<table>
<thead>
<tr>
<td colspan="2">
<li class="childrens" data-id="85" style="list-style:none;margin-left:0px;"> <strong style="font-size:16px;">Papers</strong> [Desc]
</li>
</td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">
<li data-id="116" style="margin-left:20px;">Opening</li>
</td>
</tr>
<tr>
<td colspan="2">
<li data-id="109" style="margin-left:20px;">Closng</li>
</td>
</tr>
</tbody>
</table>

How do I make an entire Table a button/link to another HTML page?

I have this table, that should be a button that link to another page. The reason is that the values of the table should be changeable with data from a database. The parameter can be changes to pH for example and the Value to 7 or something. But the table/button shall link to the same page. Where it is possible to set the Target.
So far this i what i got:
<table class="Button" >
<tr>
<td class="parameter"> Temperature</td>
</tr>
<tr>
<td class="Value">23&#x2103</td>
</tr>
<tr>
<td class="Target">Target: 30&#x2103 </td>
</tr>
</table>
So how do i make it a link/button?

You can use onclick and redirect your page.
Or wrap your table with <a>
<table class="Button" onclick="location.href='yourpage.html'" >
<tr>
<td class="parameter"> Temperature</td>
</tr>
<tr>
<td class="Value">23&#x2103</td>
</tr>
<tr>
<td class="Target">Target: 30&#x2103 </td>
</tr>
</table>

The same way as anything else.
You put an <a> element (with an href attribute) around it.

Wrap it into a link element:
<a href="LINK.html">
<table>
<tr>
<td class="parameter"> Temperature</td>
</tr>
<tr>
<td class="Value">23&#x2103</td>
</tr>
<tr>
<td class="Target">Target: 30&#x2103 </td>
</tr>
</table>
</a>
And if you wanna have a button, add a button element to that:
<button style="color:black; background-color:white; border-radius:5px;">
<a href="LINK.html">
<table>
<tr>
<td class="parameter"> Temperature</td>
</tr>
<tr>
<td class="Value">23&#x2103</td>
</tr>
<tr>
<td class="Target">Target: 30&#x2103 </td>
</tr>
</table>
</a>
</button>

You can do it using javascript onClick event or put <a> tag around it
Html
<table class="button" onClick="linkTo('https://www.google.com')">
.
.
.
</table>
Java Script
<script>
function linkTo(var link){
window.location = link;
}
</script>
Css for mouse point
<style>
table.button{
cursor: pointer;
}
</style>

jQuery select various information from different <tr>

I'm working with the following HTML:
<tr class="oddrow">
<td>row1</td>
<td style="text-align:center;">
<table>
<tbody>
<tr>
<td width="50%">-1<br>+1</td>
<td width="50%">WSH: -110<br>SAC: -110</td>
</tr>
</tbody>
</table>
</td>
<td style="text-align:center;">
<table>
<tbody>
<tr>
<td width="50%">202.5</td>
<td width="50%">o: -110<br>u: -110</td>
</tr>
</tbody>
</table>
</td>
<td style="text-align:center;">WSH: 0<br>SAC: 0</td>
</tr>
<tr class="evenrow">
<td>row2</td>
<td style="text-align:center;">
<table>
<tbody>
<tr>
<td width="50%">-1<br>+1</td>
<td width="50%">WSH: -110<br>SAC: -110</td>
</tr>
</tbody>
</table>
</td>
<td style="text-align:center;">
<table>
<tbody>
<tr>
<td width="50%">202.5</td>
<td width="50%">o: -110<br>u: -110</td>
</tr>
</tbody>
</table>
</td>
<td style="text-align:center;">WSH: 0<br>SAC: 0</td>
<!-- The above line is the one I need. --!>
</tr>
There are 2 such rows (row1 and row2), alternating as an oddrow then evenrow. I have the entire HTML as a string in my JavaScript/jQuery code. I also have the information of the two three-letter abbreviations: in this example, WSH and SAC. What I need is the third <td style="text-align:center;"> of the row2 row. I should point out that there are several tables of row1 and row2 on the page, so I need a general selector. What I have been doing is just grabbing all the data in all the rows then parsing it from there, but the inconsistency of the data is making that more difficult. Is there a quick and dirty jQuery that will point me to the data I need?
I was thinking something like $("tr td:contains(" + abbrev + ") td:contains('row2')").text();, but that doesn't get it.
Can anyone help?

Your hierarchy in your selector is wrong, tds with the abbreviation are not an ancestor to the tds with the text of "row2"
You also need to ensure you have apostrophes around your abbrev variable.
Can you try:
$("tr td:contains('row2') td:contains('" + abbrev + "')").text()
Any chance you can add semantic classes instead? These sorts of selectors are gnarly to maintain.