Prevent table from resizing when adding border to specific cell - javascript

Here is my code. The problem is: When i click a td cell, add border to it, and the border makes the table changes size.
For some reasons, i dont want the table increase its size when adding border to td tag, and i can not use outline in css.
I tried to add this line of css code : box-sizing: border-box; but it does not seem to work.
Thank you for any idea!!
Array.prototype.forEach.call(
document.querySelectorAll('td'),
function(td) {
td.addEventListener('click', function(e) {
e.target.classList.add('myBorder')
})
})
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
box-sizing: border-box;
}
.myBorder {
border: 2px solid #4b89ff;
}
<table>
<thead>
<tr>
<th>id</th>
<th>Name</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Bob</td>
<td>Male</td>
</tr>
<tr>
<td>2</td>
<td>Anna</td>
<td>Female</td>
</tr>
<tr>
<td>3</td>
<td>Christ</td>
<td>Male</td>
</tr>
</tbody>
</table>


Inspecting the td with Chrome i found that adding the class to the cell was also generating a padding of 1px. And if you set padding-bottom: 0px; on .myBorder class will solve the problem.
Array.prototype.forEach.call(
document.querySelectorAll('td'),
function(td) {
td.addEventListener('click', function(e) {
e.target.classList.add('myBorder')
})
})
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
}
.myBorder {
border: 2px solid #4b89ff;
padding-bottom: 0px;
}
<table>
<thead>
<tr>
<th>id</th>
<th>Name</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Bob</td>
<td>Male</td>
</tr>
<tr>
<td>2</td>
<td>Anna</td>
<td>Female</td>
</tr>
<tr>
<td>3</td>
<td>Christ</td>
<td>Male</td>
</tr>
</tbody>
</table>

Related

How to display a maximum number of rows and automatically create new tables in HTML?

My table has 2 columns and many rows. Writing a table in HTML displays rows one under the other and needs scrolling.
I want to set a fixed number of rows (i.e. 5 rows) so that a "new table" (with the very 2 same columns titles) is displayed next to the first one as soon as the limit of 5 rows is reached.
This allows to see all rows at a glance and avoids thinking about where to break rows.
I made an illustration of this : https://i.postimg.cc/ZKv16T2q/tables-illustration.jpg
I don't know how to do this (is this a HTML, CSS or JavaScript issue?), I hope my post is clear enough.
Thanks

Someone at reddit gave me a nice answer : https://codepen.io/anon/pen/wZoYpy
HTML
<table class="table-col">
<thead>
<tr>
<th scope="col">/</th>
<th scope="col">Title 1</th>
<th scope="col">Title 2</th>
</tr>
<tr>
<th scope="col">/</th>
<th scope="col">Title 1</th>
<th scope="col">Title 2</th>
</tr>
<tr>
<th scope="col">/</th>
<th scope="col">Title 1</th>
<th scope="col">Title 2</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">#1</th>
<td>text</td>
<td>text</td>
</tr>
<tr>
<th scope="row">#2</th>
<td>text</td>
<td>text</td>
</tr>
<tr>
<th scope="row">#3</th>
<td>text</td>
<td>text</td>
</tr>
<tr>
<th scope="row">#4</th>
<td>text</td>
<td>text</td>
</tr>
<tr>
<th scope="row">#5</th>
<td>text</td>
<td>text</td>
</tr>
<tr>
<th scope="row">#6</th>
<td>text</td>
<td>text</td>
</tr>
<tr>
<th scope="row">#7</th>
<td>text</td>
<td>text</td>
</tr>
<tr>
<th scope="row">#8</th>
<td>text</td>
<td>text</td>
</tr>
<tr>
<th scope="row">#9</th>
<td>text</td>
<td>text</td>
</tr>
</tbody>
</table>
CSS
.table-col {
width: 100%;
border-collapse: collapse;
}
.table-col thead, .table-col thead tr {
height: 52px; /* set the header height */
overflow: hidden;
}
.table-col thead, .table-col tbody {
display: block;
columns: 3 400px; /* # of columns, min column width */
}
.table-col tr {
display: flex;
break-inside: avoid;
}
.table-col thead th {
background-color: #eee;
}
.table-col th {
font-weight: bold;
text-align: left;
}
.table-col th:first-child {
max-width: 40px;
text-align: center;
}
.table-col td, .table-col th {
flex: 1;
padding: 1em;
border-top: 1px solid #ddd;
word-break: break-word;
}

Variable Table Inner components width not working html css

I am trying to build this excel table with html and css. The problem i kept facing is the when i try to add different number of columns for different rows, It surpasses the border limit and extends by itself. My intent is to replicate the contents of the picture.
table
{
table-layout: fixed;
border-collapse: collapse;
width: 100%;
border: 3px solid #151515;
}
th, td
{
border: 1px solid #151515;
padding: 12px;
text-align: center;
}
th
{
font-weight: bold;
}
tfoot tr:nth-child(2)
{
font-weight: normal;
height: 100px;
}
.colored td
{
background-color: #aaaaaa;
}
<table>
<tbody>
<tr>
<th colspan="4" class="title">PURCHASE DETAILS</th>
</tr>
<tr class="colored">
<th rowspan="2">BUDGET CODE:</th>
<td>Account Code</td>
<td>Cost Center</td>
<td>Project Code</td>
<td>DEA</td>
</tr>
<tr>
<td>5458</td>
<td>22222</td>
<td>3658954</td>
<td>95874</td>
</tr>
<tr>
<th>PO Number:</th>
<td>PO/SC/2010/33</td>
<th>Supplier:</th>
<td>STORM TECH</td>
</tr>
<tr>
<th>SOF:</th>
<td>00254584</td>
<th>Value (Purchase Price USD):</th>
<td><b>1,084.89</b></td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2">Plan After Award Ends:</th>
<td colspan="2">Carry Over</td>
</tr>
</tfoot>
</table>
If anybody can assist please.

Not sure table layout is the best choice here, but it can be done. Just create more cells per row and span the cells you need over 2 or 3 "cells"
table
{
table-layout: fixed;
border-collapse: collapse;
width: 100%;
border: 3px solid #151515;
}
th, td
{
border: 1px solid #151515;
padding: 12px;
text-align: center;
}
th
{
font-weight: bold;
}
tfoot tr:nth-child(2)
{
font-weight: normal;
height: 100px;
}
.colored td
{
background-color: #aaaaaa;
}
<table>
<tbody>
<tr>
<th colspan="8" class="title">PURCHASE DETAILS</th>
</tr>
<tr class="colored">
<th rowspan="2">BUDGET CODE:</th>
<td colspan="2">Account Code</td>
<td colspan="2">Cost Center</td>
<td colspan="2">Project Code</td>
<td>DEA</td>
</tr>
<tr>
<td colspan="2">5458</td>
<td colspan="2">22222</td>
<td colspan="2">3658954</td>
<td>95874</td>
</tr>
<tr>
<th>PO Number:</th>
<td colspan="3">PO/SC/2010/33</td>
<th colspan="2">Supplier:</th>
<td colspan="2">STORM TECH</td>
</tr>
<tr>
<th>SOF:</th>
<td colspan="3">00254584</td>
<th colspan="2">Value (Purchase Price USD):</th>
<td colspan="2"><b>1,084.89</b></td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2">Plan After Award Ends:</th>
<td colspan="6">Carry Over</td>
</tr>
</tfoot>
</table>

What's the easiest way to format web-based data by content, CSS, Javascript, or other method?

I currently have this HTML:
<html>
<head>
<title>IN Print ALL</title>
<link rel="shortcut icon" href="\\MyServer\Webcaster\favicon.ico" />
<style type='text/css'>
caption
{
background-color:333BFF;
color:white;
border-style:solid;
border-width:1px;
border-color:336699;
text-align:center;
}
table
{
font-family:Tahoma;
border-collapse:collapse;
font-size:15pt;
width:85%;
border-style:solid;
border-color:white;
border-width:1px;
}
th
{
font-size:10pt;
color:black;
text-align:center;
font-weight:bold;
}
tbody tr:nth-child(odd)
{
background: #eee;
}
tr
{
}
td
{
font-size:10pt;
color:black;
border-style:solid;
border-width:1px;
border-color:cccccc;
text-align:left;
padding:3px;
}
</style>
<meta http-equiv="refresh" content="30" />
</head>
<tbody>
<table align="center">
<caption> On The Floor Printing IN ALL as of {%Current Date Time%}
</caption>
<thead>
<tr>
<th>Cycle Code</th>
<th>Product</th>
<th>Description</th>
<th>Warehouse</th>
<th>Production Due Date</th>
<th>Status</th>
<th>Status Comment</th>
<th>Sales Order Number</th>
<th>Job Description</th>
<th>Ship Expire Date</th>
<th>Days Until Due</th>
<th>Total Hours</th>
<th>Remaining Sch Hrs</th>
<th>Sch Hrs</th>
<th>Rev Budget Hrs</th>
</tr>
</thead>
<tbody>
{BEGIN*REPEAT}
<tr>
<td>{UDF_CYCLE}</td>
<td>{Product}</td>
<td>{Description}</td>
<td>{WarehouseCode}</td>
<td>{ProductionDueDate}</td>
<td>{StatusCode}</td>
<td>{CurrentStatusComment}</td>
<td>{SalesOrderNo}</td>
<td>{UDF_JOBDESC}</td>
<td>{ShipExpireDate}</td>
<td>{daystilldue}</td>
<td>{TotalHours}</td>
<td>{RemainingScheduledHours}</td>
<td>{ScheduledHours}</td>
<td>{RevisedBudgetHours}</td>
</tr>
{END*REPEAT}
</tbody>
</table>
</body>
</html>
It creates a nice table that displays the data. What I'm wanting is for any record that has a {daystilldue} < 1 to display in a red font. I've been looking at a JavaScript IF statement, but I haven't been able to get it to work. I'd appreciate any ideas or incites on the best way to do this.

Having thought a bit further, you can actually do this with a small modification to your HTML - using data attributes, and a selector looking for the right thing. In this case, it looks for a value of "0" or anything starting with "-", ie negative numbers. In the example below I've cut down the table to just a few columns and added a few rows to show how the template might expand in certain scenarios.
I've put an inner span in this td, as altering the color of a td also affects its borders.
span[data-daystilldue="0"], /* anything that's 0 */
span[data-daystilldue^="-"] { /* or anything starting with -, ie negative numbers */
color:red;
}
table {
font-family: Tahoma;
border-collapse: collapse;
font-size: 15pt;
width: 85%;
border-style: solid;
border-color: white;
border-width: 1px;
}
td {
font-size: 10pt;
color: black;
border-style: solid;
border-width: 1px;
border-color: cccccc;
text-align: left;
padding: 3px;
}
<table align="center">
<thead>
<tr>
<th>Cycle Code</th>
<th>Product</th>
<th>Days Until Due</th>
</tr>
</thead>
<tbody>
{BEGIN*REPEAT}
<tr>
<td>{UDF_CYCLE}</td>
<td>{Product}</td>
<td><span data-daystilldue="{daystilldue}">{daystilldue}</span></td>
</tr>
<tr>
<td>{UDF_CYCLE}</td>
<td>Example 1</td>
<td><span data-daystilldue="1">1</span></td>
</tr>
<tr>
<td>{UDF_CYCLE}</td>
<td>Example 2</td>
<td><span data-daystilldue="0">0</span></td>
</tr>
<tr>
<td>{UDF_CYCLE}</td>
<td>Example 3</td>
<td><span data-daystilldue="-1">-1</span></td>
</tr>
<tr>
<td>{UDF_CYCLE}</td>
<td>Example 4</td>
<td><span data-daystilldue="-20">-20</span></td>
</tr>
{END*REPEAT}
</tbody>
</table>

Fix table header at top of scrollable div

The div in this example is scrollable, how do I make the header of the table fixed to the top of the div?
<div id="table" style="overflow: auto; border: 1px solid;">
<table id="table_id">
<tr>
<th>A</th>
<th>B</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
</table>
</div>

I would split into 2 sections and dictate the widths (% if responsive).
<table id="table-top">
<tr>
<th>A</th>
<th>B</th>
</tr>
</table>
<div id="table">
<table id="table_id">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
</table>
</div>
CSS....
#table{
overflow-y: auto;
height:150px;
border-bottom:1px solid grey;
}
table{
width:100%;
}
table td, table th{
border-color: grey;
border: 1px solid;
width:50%;
}
https://jsfiddle.net/tonytansley/mvp4u54q/

Different width of column in the HTML table

I am trying to make the width of tds different in the HTML tale but I am unable to do so.
HTML Code
<table class="TFtable" border="1">
<tr>
<th >Heading1</th>
<th >Heading2</th>
<th >Heading3</th>
</tr>
<tr>
<td>Text jshdf hjkhsdk jhfkhds fkjhf sdjkh dsfkjh</td>
<td >Text</td>
<td >Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
</table>
CSS
.TFtable {
width: 50%;
border-collapse: collapse;
table-layout: fixed;
}
.TFtable tr {
padding: 7px;
border: #4e95f4 1px solid;
}
/* provide some minimal visual accomodation for IE8 and below */
.TFtable tr {
background: #FFFFFF;
}
/* Define the background color for all the ODD background rows */
.TFtable tr:nth-child(odd) {
background: #FFFFFF;
}
/* Define the background color for all the EVEN background rows */
.TFtable tr:nth-child(even) {
background: #BCCECE;
}
.TFtable td{
table-layout: fixed;
width: 20px;
height:auto;
overflow: auto;
}
Link to JSFiddle.
Here

You can use this HTML Code to make different td`s width without using CSS
<table border="1" width="100%;">
<tr>
<th >Heading1</th>
<th >Heading2</th>
<th >Heading3</th>
</tr>
<tr>
<td width="20%">Text jshdf hjkhsdk jhfkhds fkjhf sdjkh dsfkjh</td>
<td width="30%">Text</td>
<td width="50%">Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
</table>

Categories

Resources