How can I get the td width and make it dynamically change once you added a long text to them... Because I'm planning to have a table-body scrollable.. and I don't want to use the clone() is there way to make it happen?..
Here's the markup:
<div class="table-cont">
<div class="table-header">
<table>
<caption>
</caption>
<tbody>
<tr>
<td>Width 1</td>
<td>Width 2</td>
<td>Width 3</td>
<td>Width 4</td>
<td>Width 5</td>
<td>Width 6</td>
</tr>
</tbody>
</table>
</div>
<div class="table-body">
<table>
<tbody>
<tr>
<td>Width 1</td>
<td>Width 2</td>
<td>Width 3</td>
<td>Width 4</td>
<td>Width 5</td>
<td>Width 6</td>
</tr>
</tbody>
</table>
</div>
script:
var tableHeader = $('.table-header').children('table').outerWidth(true);
var tableWidth = $('.table-header table tr td').width();
alert(tableWidth);
$('table-body tr td').append(tableWidth);
css:
.table-header,
.table-body{
border: 1px solid #d3d3d3;
display: inline-block;
}
table {
border-collapse: 0;
border-spacing: 0;
border: 0;
}
table thead th,
table tbody tr td{
border-right: 1px solid #d3d3d3;
padding: 5px 8px;
font-weight: normal;
table-layout: fixed;
}
table thead th:last-child,table tbody tr td:last-child{
border-right: 0;
}
If you want to set the width use:
$('table-body tr td').width(tableWidth);
Try this,
var tableHeader = $('.table-header').children('table').outerWidth(true);
var tableWidth = $('.table-header table tr td').width();
alert(tableWidth);
$('.table-body table tr td').each(function(){
$(this).append(' '+tableWidth);
});
Fiddle
Updated for making the th with the same width as of td.
$('.table-body table tr th').each(function(){
$(this).append(' '+tableWidth);
});
Related
how to add border for filename3 and filename4 column as a whole using html and css.
table with borders
<table>
<tbody>
<td id="filename1"> 1</td>
<td id="filename2">1 </td>
<td id="filename3"> 1</td>
<td id="filename4"> 1</td>
</tbody>
</table>
You can give both cells a border, then remove the border on one side with the border-right and border-left properties:
table {
border-collapse: collapse;
}
#filename3 {
border: 10px solid;
border-right: 0px;
}
#filename4 {
border: 10px solid;
border-left: 0px;
}
<table>
<td id="filename1">1</td>
<td id="filename2">2</td>
<td id="filename3">3</td>
<td id="filename4">4</td>
</table>
css:
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
Html:
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td colspan="2">sum: 180</td>
</tr>
</table>
Have you tried this colspan attribute? If this is what you asked.
I assume you are trying to select both of the ID's at the same time? You can select both of the IDs by
#filename3, #filename4 {/*enter css styles here*/}
If you are trying to select both by a single class, simply add a parent div around the 2 elements you are trying to group.
<tbody><td id="filename1"> </td><td id="filename2"> </td><div class='parent'><td id="filename3"> </td><td id="filename4"> </td></div></tbody>
Hope this helped :)!
I have a 3*3 table. I need to remove 3rd column if there is no content to display in it.In my js file I wrote something like below.
$('table tbody tr td').each(function () {
if (tempHTML.indexOf("#E") !== -1) { // true
$(this).attr("colspan", 2);
$(this).next("td").remove(); // removes extra td
}
});
tempHtml is my html, in my js file what should be the this to set colspan attribute?
Expected result is to increase the colspan and remove the next td and to have a 3*2 table. Please explain with detail as I'm new to js and html.
As nobody seems interested in answering you, and you asked how to realize your request in javascript, in spite of having presented code in jQuery, here is a solution:
const MyTableBody = document.querySelector('#Table-3cols tbody')
, BtRemC3 = document.querySelector('#Bt-Clean-col3')
BtRemC3.onclick=_=>
{
MyTableBody
.querySelectorAll('td:nth-child(3)')
.forEach(xTD=>
{
if (xTD.textContent==='')
{
let pTR = xTD.parentElement
pTR.removeChild(xTD)
pTR.cells[1].colSpan = 2
}
}
)
}
table { border-collapse: collapse; margin: 1em }
td { border: 1px solid grey; padding: .6em 1em}
thead { font-weight: bold }
<button id="Bt-Clean-col3">Remove empty Cols 3</button>
<table id="Table-3cols">
<thead>
<tr> <td>col 1</td> <td>col 2</td> <td>col 3</td> </tr>
</thead>
<tbody>
<tr> <td>aa</td> <td>bb</td> <td>cc</td> </tr>
<tr> <td>aa</td> <td>bb</td> <td>cc</td> </tr>
<tr> <td>aa</td> <td>bb</td> <td></td> </tr>
<tr> <td>aa</td> <td>bb</td> <td>cc</td> </tr>
<tr> <td>aa</td> <td>bb</td> <td>cc</td> </tr>
<tr> <td>aa</td> <td>bb</td> <td></td> </tr>
<tr> <td>aa</td> <td>bb</td> <td>cc</td> </tr>
</tbody>
</table>
explanations for: (arrow functions)
BtRemC3.onclick=_=>
{
MyTableBody
.querySelectorAll(`td:nth-child(3)`)
.forEach(xTD=>
{
this is like :
BtRemC3.addEventListener('click', function()
{
MyTableBody.querySelectorAll('td:nth-child(3)').forEach( function(xTD)
{
so, for the complete code this is :
const MyTableBody = document.querySelector('#Table-3cols tbody')
, BtRemC3 = document.querySelector('#Bt-Clean-col3')
;
BtRemC3.addEventListener('click', function()
{
MyTableBody.querySelectorAll('td:nth-child(3)').forEach( function(xTD)
{
if (/#E/.test(xTD.textContent) ) // previously (xTD.textContent==='')
{
let pTR = xTD.parentElement;
pTR.removeChild(xTD);
pTR.cells[1].colSpan = 2;
}
});
});
table { border-collapse: collapse; margin: 1em }
td { border: 1px solid grey; padding: .6em 1em}
thead { font-weight: bold }
<button id="Bt-Clean-col3">Remove Cols 3 with '#E'</button>
<table id="Table-3cols">
<thead>
<tr> <td>col 1</td> <td>col 2</td> <td>col 3</td> </tr>
</thead>
<tbody>
<tr> <td>aa</td> <td>bb</td> <td>cc</td> </tr>
<tr> <td>aa</td> <td>bb</td> <td>cc</td> </tr>
<tr> <td>aa</td> <td>bb</td> <td>blah blah blah#E blah </td> </tr>
<tr> <td>aa</td> <td>bb</td> <td>cc</td> </tr>
<tr> <td>aa</td> <td>bb</td> <td>cc</td> </tr>
<tr> <td>aa</td> <td>bb</td> <td>blah blah#E blah </td> </tr>
<tr> <td>aa</td> <td>bb</td> <td>cc</td> </tr>
</tbody>
</table>
I also changed the test about your #E value
regular expression to test if xTD.textContent contain '#E'
please read How to check whether a string contains a substring in JavaScript?
There are a couple of things you need to do:
First, if you're using each, you should pass in the index and the value. Then use the value when getting tempHTML, and doing your modifications to the HTML.
$('table tbody tr td').each(function (i,f) {
var tempHTML = $(f).text();
if (tempHTML.indexOf("#E") !== -1) { //true
$(f).attr("colspan", 2);
$(f).next().remove();
}
});
table { border-collapse: collapse; margin: 1em }
td { border: 1px solid grey; padding: .6em 1em}
thead { font-weight: bold }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>ABC</td>
<td>DEF</td>
<td>GHI</td>
</tr>
<tr>
<td>AEC</td>
<td>D#EF</td>
<td>GHI</td>
</tr>
<tr>
<td>ABC</td>
<td>DEF</td>
<td>GHI</td>
</tr>
</table>
I am building a bootstrap table: JSBin:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
table.table-border {
border: 2px solid #E6E9ED;
}
table, th, td {
border: 1px solid #E6E9ED;
text-align: center
}
</style>
</head>
<body>
<div class="table-responsive">
<table class="table table-condensed table-border table-striped">
<thead>
<tr>
<th colspan="2">h12</th>
<th colspan="4">h345</th>
</tr>
<tr>
<th>h1</th>
<th>h2</th>
<th>h3</th>
<th>h4</th>
<th>h5</th>
</tr>
</thead>
<tbody>
<tr>
<td>abc</td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td>efg</td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td>hij</td><td></td><td></td><td></td><td></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I want to hide the borders between the columns h1 and h2, between h3 and h4, and between h4 and h5. Does anyone know how to do it? A solution with JavaScript will be fine too...
Assuming that you want the borders to be removed, or made transparent, between each pair of odd and even <td> elements, then the following works:
thead tr:nth-child(2) th:nth-child(odd) {
border-right-width: 0;
}
thead tr:nth-child(2) th:nth-child(even) {
border-left-width: 0;
}
table.table-border {
border: 2px solid #E6E9ED;
}
table,
th,
td {
border: 1px solid #E6E9ED;
text-align: center
}
thead tr:nth-child(2) th:nth-child(odd) {
border-right-width: 0;
}
thead tr:nth-child(2) th:nth-child(even) {
border-left-width: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="table-responsive">
<table class="table table-condensed table-border table-striped">
<thead>
<tr>
<th colspan="2">h12</th>
<th colspan="4">h345</th>
</tr>
<tr>
<th>h1</th>
<th>h2</th>
<th>h3</th>
<th>h4</th>
<th>h5</th>
</tr>
</thead>
<tbody>
<tr>
<td>abc</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>efg</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>hij</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
JS Fiddle demo.
This styles all the odd-numbered (th:nth-child(odd)) <th> elements within the second <tr> (tr:nth-child(2)) within the <thead> element with a border-right-width of 0 (effectively hiding it, although border-right-color: transparent; or border-right-style: none would achieve a very similar end-result).
The second selector does precisely the same thing, but selects the even-numbered children of the second <tr> of the <thead>.
In view of the comment below, clarifying the requirements:
Sorry, I also want to delete the borders in Rows 3, 4, 5, between the columns h1 and h2, between h3 and h4, and between h4 and h5.
I'd suggest amending the selectors to the following:
thead tr:nth-child(2) th:nth-child(odd),
tbody tr td:nth-child(odd) {
border-right-width: 0;
}
thead tr:nth-child(2) th:nth-child(even),
tbody tr td:nth-child(even) {
border-left-width: 0;
}
table.table-border {
border: 2px solid #E6E9ED;
}
table,
th,
td {
border: 1px solid #E6E9ED;
text-align: center
}
thead tr:nth-child(2) th:nth-child(odd),
tbody td:nth-child(odd) {
border-right-width: 0;
}
thead tr:nth-child(2) th:nth-child(even),
tbody td:nth-child(even) {
border-left-width: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="table-responsive">
<table class="table table-condensed table-border table-striped">
<thead>
<tr>
<th colspan="2">h12</th>
<th colspan="4">h345</th>
</tr>
<tr>
<th>h1</th>
<th>h2</th>
<th>h3</th>
<th>h4</th>
<th>h5</th>
</tr>
</thead>
<tbody>
<tr>
<td>abc</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>efg</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>hij</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
JS Fiddle demo.
This does exactly the same as above, but also selects the odd, and even, <td> children of the tbody and styles them appropriately along with the <th> elements of the second <tr> of the <thead>.
While all the requirements were in the question I appear to have studiously misread the question, for reasons unknown. With the prompt, again, in comments below:
I also want to delete the border between h4 and h5
The approach here remains the same, but we use slightly more complex selectors by which to select the appropriate elements:
/* Selects the first <th> child of the second <tr>
descendent of the <thead>, and also every first
<td> child contained within the <tbody>: */
thead tr:nth-child(2) th:first-child,
tbody td:first-child {
border-right-width: 0;
}
/* Selects the second <th> child of the second <tr>
descendent of the <thead>, and also every second
<td> child contained within the <tbody>: */
thead tr:nth-child(2) th:nth-child(2),
tbody td:nth-child(2) {
border-left-width: 0;
}
/* Selects every <th> element that follows the second
<th> child element of the second <tr> of the <thead>
using the general sibling ('~') combinator; and also
every <td> that appears after the second <td> of the
<tbody>: */
thead tr:nth-child(2) th:nth-child(2) ~ th,
tbody td:nth-child(2) ~ td {
border-left-width: 0;
}
/* Because we (presumably) want the final <th> and <td>
of each <tr> to retain its right-border, we here select
every <th> element which is not the last-child of its
parent which follows the second-child of the parent, and
similarly for the <td> elements: */
thead tr:nth-child(2) th:nth-child(2) ~ th:not(:last-child),
tbody td:nth-child(2) ~ td:not(:last-child) {
border-right-width: 0;
}
table.table-border {
border: 2px solid #E6E9ED;
}
table,
th,
td {
border: 1px solid #E6E9ED;
text-align: center
}
thead tr:nth-child(2) th:first-child,
tbody td:first-child {
border-right-width: 0;
}
thead tr:nth-child(2) th:nth-child(2),
tbody td:nth-child(2) {
border-left-width: 0;
}
thead tr:nth-child(2) th:nth-child(2) ~ th,
tbody td:nth-child(2) ~ td {
border-left-width: 0;
}
thead tr:nth-child(2) th:nth-child(2) ~ th:not(:last-child),
tbody td:nth-child(2) ~ td:not(:last-child) {
border-right-width: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="table-responsive">
<table class="table table-condensed table-border table-striped">
<thead>
<tr>
<th colspan="2">h12</th>
<th colspan="4">h345</th>
</tr>
<tr>
<th>h1</th>
<th>h2</th>
<th>h3</th>
<th>h4</th>
<th>h5</th>
</tr>
</thead>
<tbody>
<tr>
<td>abc</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>efg</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>hij</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
JS Fiddle demo.
You need to set the border equal to 0px on both the left and right sides of the border you're getting rid of.
So for example:
<td style="border-right:0px;"> abc </td>
<td style="border-left:0px;"></td>
This should be the whole code below. Try it out.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
table.table-border {
border: 2px solid #E6E9ED;
}
table, th, td {
border: 1px solid #E6E9ED;
text-align: center
}
</style>
</head>
<body>
<div class="table-responsive">
<table class="table table-condensed table-border table-striped">
<thead>
<tr>
<th colspan="2">h12</th>
<th colspan="4">h345</th>
</tr>
<tr>
<th>h1</th>
<th>h2</th>
<th>h3</th>
<th>h4</th>
<th>h5</th>
</tr>
</thead>
<tbody>
<tr>
<td style="border-right:0px;">abc</td><td style="border-left:0px;" > </td><td style="border-right:0px;"></td><td style="border-left:0px; border-right:0px;"></td><td style="border-left:0px;""></td>
</tr>
<tr>
<td style="border-right:0px;">efg</td><td style="border-left:0px;" > </td><td style="border-right:0px;"></td><td style="border-left:0px; border-right:0px;"></td><td style="border-left:0px;""></td>
</tr>
<tr>
<td style="border-right:0px;">hij</td><td style="border-left:0px;" > </td><td style="border-right:0px;"></td><td style="border-left:0px; border-right:0px;"></td><td style="border-left:0px;""></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I have been success to make increment no on column.
Here my code
table {
counter-reset: rowNumber;
}
table tr {
counter-increment: rowNumber;
}
table tr td:first-child::before {
content: counter(rowNumber);
min-width: 1em;
margin-right: 0.5em;
}
<table border="1">
<tr>
<th>No</th> <th>Name</th>
</tr>
<tr>
<td></td> <td>jhon</td>
</tr>
<tr>
<td></td> <td>lucy</td>
</tr>
<tr>
<td></td> <td>joe</td>
</tr>
</table>
but i want to make table number like image on below
You must reset your counter on the second <tr>
table tr:nth-child(2){
counter-reset: rowNumber;
}
table tr {
counter-increment: rowNumber;
}
table tr td:first-child::before {
content: counter(rowNumber);
min-width: 1em;
margin-right: 0.5em;
}
<table border="1">
<tr>
<th>#</th> <th>Name</th>
</tr>
<tr>
<td></td> <td>jhon</td>
</tr>
<tr>
<td></td> <td>lucy</td>
</tr>
<tr>
<td></td> <td>joe</td>
</tr>
</table>
On the table element your counter is 1, on the first row it is incremented to 2. Hence starting at 2. You need to do the reset on the first tr.
table tr {
counter-increment: rowNumber;
}
table tr:first {
counter-reset: rowNumber;
}
Reset the counter at the second tr.
tr:nth-child(2) {
counter-reset: rowNumber;
}
table tr {
counter-increment: rowNumber;
}
table tr td:first-child::before {
content: counter(rowNumber);
min-width: 1em;
margin-right: 0.5em;
}
<table border="1">
<tr>
<th>No</th>
<th>Name</th>
</tr>
<tr>
<td></td>
<td>jhon</td>
</tr>
<tr>
<td></td>
<td>lucy</td>
</tr>
<tr>
<td></td>
<td>joe</td>
</tr>
</table>
Here is the code to fix your issue. In your code you are counting the row number which is row number 2 in you case. so it is starting from 2.
One of the solution to your problem is use thead and tbody tags and increment the row counter from tbody as done it in below solution.
table tbody {
counter-reset: rowNumber;
}
table tbody tr {
counter-increment: rowNumber;
}
table tr td:first-child::before {
content: counter(rowNumber);
min-width: 1em;
margin-right: 0.5em;
}
<table border="1">
<thead>
<tr>
<th>No</th> <th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td></td> <td>jhon</td>
</tr>
<tr>
<td></td> <td>lucy</td>
</tr>
<tr>
<td></td> <td>joe</td>
</tr>
</tbody>
</table>
I want to create a table scrollable but i need to freeze first row of the table from scrolling. how could i achieve this. Expecting any ideas from CSS or JS or Jquery
Your requirement is a very common use case, and quite sadly there is no native way of achieving it in any browser. You have plenty workarounds using CSS, JS, combinations, each solution having specific advantages and inconvenients (the main most common one being the need to fix the columns widths).
You can of course implement it yourself (browse on the web, you should have plenty tutorials for this). Or you can rely on a library that avoids common pitfalls and is most cross-browsers.
You would probably be interested in DataTables plugin for jQuery, and especially its FixedHeader extension.
example.
HTML
<table class="scroll">
<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
<th>Head 4</th>
<th>Head 5</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>
<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>
css
table.scroll {
/* width: 100%; */ /* Optional */
/* border-collapse: collapse; */
border-spacing: 0;
border: 2px solid black;
}
table.scroll tbody,
table.scroll thead { display: block; }
thead tr th {
height: 30px;
line-height: 30px;
/* text-align: left; */
}
table.scroll tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
tbody { border-top: 2px solid black; }
tbody td, thead th {
/* width: 20%; */ /* Optional */
border-right: 1px solid black;
/* white-space: nowrap; */
}
tbody td:last-child, thead th:last-child {
border-right: none;
}
JS
// Change the selector if needed
var $table = $('table.scroll'),
$bodyCells = $table.find('tbody tr:first').children(),
colWidth;
// Adjust the width of thead cells when window resizes
$(window).resize(function() {
// Get the tbody columns width array
colWidth = $bodyCells.map(function() {
return $(this).width();
}).get();
// Set the width of thead columns
$table.find('thead tr').children().each(function(i, v) {
$(v).width(colWidth[i]);
});
}).resize(); // Trigger resize handler
Using Angular you could use the FixedHeader module like this found on ngmodules http://ngmodules.org/modules/FixedHeader . Or using jquery Plug in http://markmalek.github.io/Fixed-Header-Table/
Also check out using css position: sticky http://charliepark.org/css-only-sticky-headers/
This is called Table Fixed Header Scrolling. You can use this jquery plugin it's very simple to be implemented
fixedheadertable plugin
Use plugin fixedheadertable, Datatable
Refer link Stack over Flow