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>
Related
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>
I have two nested tables. One outer table and inside every row of outer table I have inner table. My problem is when I am filtering using searchBox it filters both the tables outer and inner. I don't want to filter my inner table rows. Look at my problem I don't want my inner table to be filtered.
var $rows = $('#top_table tr');
$('#txtsearch').keyup(function () {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.show().filter(function () {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
tr.top_tr td {
border-bottom: 1px solid black;
min-width: 16%;
}
th {
font: bold 11px"Helvetica Neue", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
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: #CAE8EA url(images/bg_header.jpg) no-repeat;
width: 16%;
}
td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
padding: 0px;
color: #4f6b72;
width: 14%;
}
td:first-child {
border-left: 1px solid #C1DAD7;
}
table {
padding: 0px;
}
#top_table {
padding: 10px;
width: 800px;
}
body {
padding: 10px;
}
.subtable {
width: 100%;
}
.body-td {
border: none;
width: 16%;
}
.collapse {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition: height 0.35s ease;
-moz-transition: height 0.35s ease;
-o-transition: height 0.35s ease;
transition: height 0.35s ease;
display: inline;
width: 100%;
float: left;
}
tr.collapse>td {
display: table;
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<input type="text" id="txtsearch" />
<table id="top_table">
<thead>
<tr>
<th>List Name</th>
<th>No. Records</th>
<th>Avail. Records</th>
<th>Creation Date</th>
<th>Last Used</th>
<th>Performance</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="6">
<table class="subtable">
<tbody>
<tr class="top_tr accordion-toggle" data-toggle="collapse" data-parent="#top_table" href="#collapseOne">
<td>LIST NO. 1</td>
<td>30000</td>
<td>3340</td>
<td>05-26-2004</td>
<td>21 days ago</td>
<td>7.3 % TRANSFER RATE</td>
</tr>
<tr >
<td colspan="6">
<table>
<tbody id="collapseOne" class="accordion-body collapse">
<tr>
<td class="body-td" colspan="6">THIS IS A BIG ROW IN A TABLE</td>
</tr>
<tr>
<td class="body-td" colspan="6">THIS IS A BIG ROW IN A TABLE</td>
</tr>
<tr>
<td class="body-td" colspan="6">THIS IS A BIG ROW IN A TABLE</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="6">
<table class="subtable">
<tbody>
<tr class="top_tr accordion-toggle" data-toggle="collapse" data-parent="#top_table" href="#collapseTwo">
<td>LIST NO. 2</td>
<td>30000</td>
<td>3340</td>
<td>05-26-2004</td>
<td>21 days ago</td>
<td>7.3 % TRANSFER RATE</td>
</tr>
<tr >
<td colspan="6">
<table>
<tbody id="collapseTwo" class="accordion-body collapse">
<tr>
<td class="body-td" colspan="6">THIS IS A BIG ROW IN A TABLE</td>
</tr>
<tr>
<td class="body-td" colspan="6">THIS IS A BIG ROW IN A TABLE</td>
</tr>
<tr>
<td class="body-td" colspan="6">THIS IS A BIG ROW IN A TABLE</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="6">
<table class="subtable">
<tbody>
<tr class="top_tr">
<td>LIST NO. 3</td>
<td>30000</td>
<td>3340</td>
<td>05-26-2004</td>
<td>21 days ago</td>
<td>7.3 % TRANSFER RATE</td>
</tr>
<tr>
<td colspan="6">THIS IS A BIG ROW IN A TABLE</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Everyone i got an answer which is very much shocking i just focused on what i actually want and that was just to ignore even rows of table that contains inner tables.
And the answer to this is :var rows= $("tr:odd") and then i applied filteration on these rows .:) Thanks for you precious time.
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;
}
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>
Example
Div Page
http://www.uller.com/dump/ajaxresponseissue/index.html
Source code, works fine if go direct
http://www.uller.com/dump/ajaxresponseissue/table.html
Displaying a table dynamically into a Div table has responsive script, however when the div is loaded the Script will not run until the window is rezised.
Trying to find a way to auto trigger the script on load of the div.
Below is code examples from that link.
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ajax Response Issuet</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript" language="javascript"></script>
</head>
<body>
<div id="output"></div>
<script>
// Function called by Period select
$(document).ready(function () {
$("#output").load("table.html #loadMeOnly");$.getScript('responsibe-tables.js');$.getScript('jquery.js');
});
</script>
</body>
</html>
called table js
<div id="loadMeOnly">
<style type="text/css">
table th { font-weight: bold; }
table td, table th { padding: 9px 10px; text-align: left; }
/* Mobile */
#media only screen and (max-width: 979px) {
table.responsive { margin-bottom: 0; }
.pinned { position: absolute; left: 0; top: 0; background: #fff; width: 35%; overflow: hidden; overflow-x: scroll; border-right: 1px solid #ccc; border-left: 1px solid #ccc; }
.pinned table { border-right: none; border-left: none; width: 100%; }
.pinned table th, .pinned table td { white-space: nowrap; }
.pinned td:last-child { border-bottom: 0; }
div.table-wrapper { position: relative; margin-bottom: 20px; overflow: hidden; border-right: 1px solid #ccc; }
div.table-wrapper div.scrollable table { margin-left: 35%; }
div.table-wrapper div.scrollable { overflow: scroll; overflow-y: hidden; }
table.responsive td, table.responsive th { position: relative; white-space: nowrap; overflow: hidden; }
table.responsive th:first-child, table.responsive td:first-child, table.responsive td:first-child, table.responsive.pinned td { display: none; }
}
</style>
<table width='100%' class="responsive">
<tr>
<th scope='col'> </th>
<th colspan='3' scope='col'><center>
Invited
</center></th>
<th colspan='2' scope='col'><center>
Accepted
</center></th>
<th colspan='2' scope='col'><center>
Confirmed
</center></th>
<th colspan='2' scope='col'><center>
Attended
</center></th>
<th scope='col'><center>
Sold
</center></th>
</tr>
<tr>
<th scope='col'>Name</th>
<th scope='col'>P</th>
<th scope='col'>G</th>
<th scope='col'>Total</th>
<th scope='col'>##</th>
<th scope='col'>%</th>
<th scope='col'>##</th>
<th scope='col'>%</th>
<th scope='col'>##</th>
<th scope='col'>%</th>
<th scope='col'>##</th>
</tr>
<tr>
<td> House</td>
<td onclick='document.location = "?Databuild&Account=28&Type=P";' style='cursor:pointer;'></td>
<td onclick='document.location = "?Databuild&Account=28&Type=G";' style='cursor:pointer;'>1</td>
<td onclick='document.location = "?Databuild&Account=28";' style='cursor:pointer;'>1</td>
<td></td>
<td>0%</td>
<td></td>
<td>0%</td>
<td></td>
<td>0%</td>
<td></td>
</tr>
<tr>
<td>ss ss</td>
<td onclick='document.location = "?Databuild&Account=68&Type=P";' style='cursor:pointer;'>9</td>
<td onclick='document.location = "?Databuild&Account=68&Type=G";' style='cursor:pointer;'>32</td>
<td onclick='document.location = "?Databuild&Account=68";' style='cursor:pointer;'>41</td>
<td></td>
<td>0%</td>
<td></td>
<td>0%</td>
<td></td>
<td>0%</td>
<td></td>
</tr>
<tr>
<td>xx xx</td>
<td onclick='document.location = "?Databuild&Account=70&Type=P";' style='cursor:pointer;'></td>
<td onclick='document.location = "?Databuild&Account=70&Type=G";' style='cursor:pointer;'>28</td>
<td onclick='document.location = "?Databuild&Account=70";' style='cursor:pointer;'>28</td>
<td></td>
<td>0%</td>
<td></td>
<td>0%</td>
<td></td>
<td>0%</td>
<td></td>
</tr>
<tr>
<td>vv vv</td>
<td onclick='document.location = "?Databuild&Account=101&Type=P";' style='cursor:pointer;'>1</td>
<td onclick='document.location = "?Databuild&Account=101&Type=G";' style='cursor:pointer;'>28</td>
<td onclick='document.location = "?Databuild&Account=101";' style='cursor:pointer;'>29</td>
<td></td>
<td>0%</td>
<td></td>
<td>0%</td>
<td></td>
<td>0%</td>
<td></td>
</tr>
<tr>
<td>yy yy</td>
<td onclick='document.location = "?Databuild&Account=136&Type=P";' style='cursor:pointer;'>2</td>
<td onclick='document.location = "?Databuild&Account=136&Type=G";' style='cursor:pointer;'>19</td>
<td onclick='document.location = "?Databuild&Account=136";' style='cursor:pointer;'>21</td>
<td></td>
<td>0%</td>
<td></td>
<td>0%</td>
<td></td>
<td>0%</td>
<td></td>
</tr>
<tr>
<td><strong>Total</strong></td>
<td onclick='document.location = "?Databuild&Account=All&Type=P";' style='cursor:pointer;'>12</td>
<td onclick='document.location = "?Databuild&Account=All&Type=G";' style='cursor:pointer;'>108</td>
<td onclick='document.location = "?Databuild&Account=All";' style='cursor:pointer;'>120</td>
<td>0</td>
<td>0%</td>
<td>0</td>
<td>0%</td>
<td>0</td>
<td>0%</td>
<td>0</td>
</tr>
</table>
</div>