this is what table i need
I can easily get first and second row good but when i'm trying to make row third, I'm destroying row two.
I tried with width attribute and colspan but nothing work.
<table border="1px" width="100%">
<tr>
<td colspan="6">Cell 1</td>
</tr>
<tr >
<td colspan="3">Cell 2</td>
<td colspan="3" >Cell 3</td>
</tr>
<tr>
<td colspan="2">Cell 4</td>
<td colspan="2">Cell 5</td>
<td colspan="2">Cell 6</td>
</tr>
</table>
A <table> will conform to it's content by default so there's no need for each column to be equal in width. So manually assign equal column widths by assigning table-layout: fixed to <table> then an equal width for each column by either assigning each width to the <th> in the <thead> of the first <tr> or lacking that assign widths to the <td> of the first <tr> (of course td or th as a selector works as well), see example below.
table {
table-layout: fixed;
}
td {
width: 16.5%;
text-align: center;
}
<table border="1px" width="100%">
<tr>
<td colspan="6">I</td>
</tr>
<tr>
<td colspan="3">II</td>
<td colspan="3">III</td>
</tr>
<tr>
<td colspan="2">IV</td>
<td colspan="2">V</td>
<td colspan="2">VI</td>
</tr>
</table>
HTML concepts are so terrible sometimes.
This is my code using colspan in html table, and doesn't look as I expect.
<table border="1">
<tr>
<td colspan="3">a</td>
</tr>
<tr>
<td colspan="2">b</td>
<td>c</td>
</tr>
</table>
What I want is: cell 'a' should look 3 cell wide, cell 'b' should look 2 cell wide, cell 'c' should look 1 cell wide.
What it is doing is: cell 'a' is 2 cells wide, cell 'b' & 'c' is 1 cell wide.
Any Suggestions thanks.
Attribute colspan determines how many columns a cell overlaps with respect to other cells, not the absolute size of those columns. In your case, span 2 has two spans. how you can say it is not? don't judge it by width of a cell. span is not the width. You have to add another smaller columns to appear it as a column of two spans.
See the solution for your expectation in code snippet last example.
<h3>Example 1</h3>
<table border="1">
<tr><td>col1</td><td>col2</td><td>col3</td></tr>
<tr><td colspan="3">a</td></tr>
<tr><td colspan="2">b</td><td colspan="1">c</td></tr>
</table>
<h3>Example 2</h3>
<table border="1">
<tr><td width="80px">wide col1</td><td>col2</td><td>col3</td></tr>
<tr><td colspan="3">span 3</td></tr>
<tr><td colspan="2">span 2</td><td colspan="1">span 1</td></tr>
</table>
<h3>Your case</h3>
<table border="1">
<tr><td colspan="3">span 3</td></tr>
<tr><td colspan="2" width="66%">span 2</td><td width="33%">span 1</td></tr>
</table>
You have already answered your question as your code is working fine but your max count is only 2. If you add another row you can see the desired results.
table {
width: 300px;
]
<table border="1">
<tr>
<td colspan="3">column 1</td>
</tr>
<tr>
<td colspan="2">column 2</td>
<td>column 3</td>
</tr>
<tr>
<td>column n</td>
<td>column n</td>
<td>column n</td>
</tr>
</table>
table {
width: 200px;
}
<table border="1">
<tr>
<td>column</td>
<td>column</td>
<td>column</td>
</tr>
<tr>
<td colspan="3">column 1</td>
</tr>
<tr>
<td colspan="2">column 2</td>
<td>column 3</td>
</tr>
</table>
Your code will show the desired result just as you will add another row!!!
So colspans do exactly what they're intended for. There are n columns in the table and each table cell <td> is one column wide. Using colspan spans the cell over more columns. This has nothing to do to each column's width.
If you wish for all columns to be of the same width, you have to use some styling.
Even though it might be easier to use some CSS grid, a solution for table is as follows:
/* You can make a separate file where you calculate n dynamically and you just
* link the file with :root { ... } into html <head> */
:root {
--n: 3; /*number of columns */
}
div {
/* container for mobile because max-width only works on block elements */
width: 30em;
max-width: 100%;
}
table {
/* table takes the whole container */
width: 100%;
}
/* the following is enough for this example */
/* td:not([colspan]) {
width: calc(100% / var(--n));
} */
/* if you don't have any (or well enough placed) table cells without colspan
* attribute, then you have to calculate each possibilty like so: */
td {
width: calc(100% / var(--n));
}
td[colspan="2"] {
width: calc(100% * 2 / var(--n));
}
td[colspan="3"] {
width: calc(100% * 3 / var(--n));
}
/* and so forth up to maximum possible n */
<div>
<table border=1>
<tr>
<td colspan=2>b</td>
<td>a</td>
</tr>
<tr>
<td colspan=3>c</td>
</tr>
</table>
</div>
I have been wondering quite a long , that how the percentage width in table cells work in HTML.
Case 1: No table width specified, single row and columns are not given full space
<table>
<tr>
<td width="25%">mango</td>
<td width="25%"">apple</td>
</tr>
</table>
Case 2: No table width specified,single row and columns are given full space
<table>
<tr>
<td width="50%">mango</td>
<td width="50%"">apple</td>
</tr>
</table>
Case 3: No table width specified,single row and columns are given more than 100% space
<table>
<tr>
<td width="50%">mango</td>
<td width="50%"">apple</td>
<td widht="100%">guava</td>
</tr>
</table>
Case 4: No table width specified, multiple rows specified and columns are giving following percentage configurations
<table>
<tr>
<td width="33%">mango</td>
<td width="33%"">apple</td>
<td widht="33%">guava</td>
</tr>
<tr>
<td width="50%">papaya</td>
<td width="50%">pomengrante</td>
</tr>
</table>
Their outputs I am not able to correlate , please help me in this
The percentage will works depending On any Screen Resolution Equal to 100% So You Divide That Percentage In To Your Requirement Measurements In Percentages Example As Given below,(In Table tr width(100%)=(Addition of td(widths))
<table style="width:100%;" border="1">
<tr>
<td wdith="50%">Mango</td>
<td wdith="50%">Lemon</td>
</tr>
<!--You Given For 1st Record measurements Then Automatically Adjested 2nd Record Also Depend Upon 1st Record-->
<tr>
<td>some Item</td>
<td>some Item</td>
</tr>
</table>
<!--This Is Another Type Of Table-->
<h3>This Is Another Type Of Table</h3>
<table style="width:100%;" border="1">
<tr>
<td wdith="33%">Mango</td>
<td wdith="34%">Lemon</td>
<td wdith="33%">Something</td>
</tr>
<!--You Given For 1st Record measurements Then Automatically Adjested 2nd Record Also Depend Upon 1st Record-->
<tr>
<td>some Item</td>
<td>some Item</td><td>some Item</td>
</tr>
</table>
<h3>This Is Another Type Of Table</h3>
<table style="width:100%;" border="1">
<tr>
<td wdith="25%">Mango</td>
<td wdith="25%">Lemon</td>
<td wdith="25%">Something</td>
<td wdith="25%">Something</td>
</tr>
<!--You Given For 1st Record measurements Then Automatically Adjested 2nd Record Also Depend Upon 1st Record-->
<tr>
<td>some Item</td>
<td>some Item</td>
<td>some Item</td>
<td>some Item</td>
</tr>
</table>
The cells will work with relation to their table, but also they need to take up 100% of the table width. So that makes your case1 not work. it will split it up as 50%. But a case where you set this will work, as it's 100% of the table width.
Demo
<table>
<tr>
<td width="20%">mango</td>
<td width="80%">apple</td>
</tr>
</table>
If you need something to take up 25-25, then maybe you should look into using divs instead.
Also your last case will not work as you need to have the same amount of cells in the table.
I'm trying to make a table in HTML using bootstrap. The table consists of 2 columns, the first being a string and the other being an array of strings. Each row has it's border but some rows don't have enough elements so that the border goes across the whole table. Here's a screenshot of what I mean ...
Notice how the lines seperating the rows get cut off when the data ends. How would I get the lines that separate the rows to stretch across the whole table? This is a snipet of my code
<div style="overflow:auto; height:150px; width:75%; margin: 0 auto; margin-top:10px" ng-hide="show1">
<table class="table table-hover" style="width:auto">
<thead>
<tr>
<th>Name</th>
<th style="min-width: 150px">Family Members</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="name in names = (family | nameFilter: searchName)">
<td style="min-width: 150px"><a ng-click="findMe(name.Name)">{{name.Name}}</a></td>
<td style="min-width: 150px" ng-repeat="userName in name.User">{{userName.Name}}</td>
</tr>
</tbody>
</table>
</div>
You may want to look at this answer. Then use that info to add a colspan with a very large number (say, 200) to the final <td> of the row. That will make it expand to the length of the longest row in the table.
So your <tbody> will end up something like this:
<tbody>
<tr>
<td>First link</td>
<td>Name 1</td>
<td>Name 2</td>
<td colspan="200">Name 3</td>
</tr>
<tr>
<td>Second link</td>
<td>Name 1</td>
<td colspan="200">Name 2</td>
</tr>
...
</tbody>
I don't think that these should actually be table cells, but no matter. You can create a function to calculate the longest list of usernames.
<td ng-repeat="i in new Array(longestList() - name.User.length)></td>
There are two tables with width 600px and 5 Columns each. But, width has not been set for each column. Here, I want to make columns width must be same in both the tables. You can use CSS or jQuery. And, I dont want to fix the column width manually.
HTML Example:
<table width="600" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>hdng 1</td>
<td>hdng 2</td>
<td>hdng 3</td>
<td>hdng 4</td>
<td>hdng 5</td>
</tr>
</table>
<table width="600" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>content content content</td>
<td>con</td>
<td>content content content</td>
<td>content content content</td>
<td>content content content</td>
</tr>
</table>
Any help would be highly appreciated.
If you want all columns are in the same width, and since you're sure that you'll have exactly five columns in each table, I would suggest:
<table style="table-layout:fixed">
<col style="width:20%" span="5" />
<tr><!--stuffs...--></tr>
</table>
I know this question is a year old, but there is a way to do what you're asking!
Inside the table tag, you can use thead and tbody tags to group rows. You can also have multiple tbody tags, which allows you to keep the width the same (as they will be the same table), but style differently as required (or in my case, show and hide).
Example HTML can be found in this answer, copied for retnension https://stackoverflow.com/a/3076790/89211
<table>
<thead>
<tr><th>Customer</th><th>Order</th><th>Month</th></tr>
</thead>
<tbody>
<tr><td>Customer 1</td><td>#1</td><td>January</td></tr>
<tr><td>Customer 1</td><td>#2</td><td>April</td></tr>
<tr><td>Customer 1</td><td>#3</td><td>March</td></tr>
</tbody>
<tbody>
<tr><td>Customer 2</td><td>#1</td><td>January</td></tr>
<tr><td>Customer 2</td><td>#2</td><td>April</td></tr>
<tr><td>Customer 2</td><td>#3</td><td>March</td></tr>
</tbody>
<tbody>
<tr><td>Customer 3</td><td>#1</td><td>January</td></tr>
<tr><td>Customer 3</td><td>#2</td><td>April</td></tr>
<tr><td>Customer 3</td><td>#3</td><td>March</td></tr>
</tbody>
</table>
I ran into this same issue and I found a kind of unclean, but working method.
Using JavaScript, you can momentarily combine both tables to get the desired auto-adjusted column widths and apply these widths to the elements in the two tables. After applying the widths to both tables in rows that aren't going to be removed, you can remove the rows you added to the combination table.
It's easiest if both tables are selectable individually (I just added ids) and if you can group the rows that you add to one table (I used tbody tags) so you can easily remove what you've added.
Hope this helps someone even though it's eight years late for the original post!
//add table 2 to table 1
$("#table1").append($("#table2 tbody").clone(true));
let table1_elems = $("#table1 tr:first td");
let table2_elems = $("#table2 tr:first td");
$(table1_elems).each(function(i) {
//get the column width from the combined table and apply to both tables
//(first one seems redundant, but is necessary once rows are removed)
$(this).width($(this).width());
$(table2_elems[i]).width($(this).width());
});
//remove the added rows
$("#table1 tbody:last").remove();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table1" width="600" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>hdng 1</td>
<td>hdng 2</td>
<td>hdng 3</td>
<td>hdng 4</td>
<td>hdng 5</td>
</tr>
</table>
<table id="table2" width="600" border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>content content content</td>
<td>con</td>
<td>content content content</td>
<td>content content content</td>
<td>content content content</td>
</tr>
</tbody>
</table>
You are looking for table-layout:fixed
see example:
http://jsfiddle.net/RsAhk/
Table cell width is dependent on its content if the width is not given via style.
By default, most browsers use an automatic table layout algorithm. The
widths of the table and its cells are adjusted to fit the content.
If you want to have an exact width to table cells of different tables then first understand the following description.
Table and column widths are set by the widths of the table and col
elements or by the width of the first row of cells. Cells in
subsequent rows do not affect column widths. Under the "fixed" layout
method, the entire table can be rendered once the first table row has
been downloaded and analyzed. This can speed up rendering time over
the "automatic" layout method, but subsequent cell content might not
fit in the column widths provided. Cells use the overflow property to
determine whether to clip any overflowing content, but only if the
table has a known width; otherwise, they won't overflow the cells.
CSS
table{
table-layout:fixed; /* same width will be applied to both the tables*/
}
table td {
width:20%; /*20% width for 5 td elements*/
}
for more information https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
If you know that each table will have exactly 5 columns, applying width: 20% is your best bet:
td {
width: 20%;
}
But if you can have any number of columns, you can instead write a simple JQuery script to figure out how many columns there are and set the widths accordingly.
Here is a JSFiddle demo. I modified the HTML to add id="first" to the first table, so I could get a concrete reference to it. Then the JavaScript is this:
var num = $("table#first tr:first-child > td").length;
var width = (100 / num) + "%";
$("td").css("width", width);
Basically it grabs the first row of the #first table and counts the number of columns. Then it finds the corresponding percentage width for that number of columns. Then it applies that width to all <td> elements.
This will work as long as there are no colspan defined on the tds, which would throw off the column count. The columns will be equal since you've defined an explicit width on both tables.
We can move all the second table rows to the first table. Then set table cell width style to fix column width. After do this, we can move back the rows to the seconds table.
And if the table has images or fonts, you should do the work after they loaded.
/**
* Align two table column width
* #param {HTMLTableElement} table1
* #param {HTMLTableElement} table2
*/
function fixTableCellWidth (table1, table2) {
// container means `thead` or `tbody`
const sourceContainers = Array.from(table2.children);
const sourceTrs = sourceContainers.map(container => Array.from(container.children));
// move second table rows to first table
sourceTrs.forEach(trs => {
trs.forEach(tr => {
table1.lastElementChild.appendChild(tr);
});
});
// fix table cell width
Array.from(table1.children).forEach(container => {
Array.from(container.children).forEach(tr => {
Array.from(tr.children).forEach(td => {
if (td.style.width) return;
const rect = td.getClientRects()[0];
td.style.width = `${rect.width}px`;
});
});
});
// move back the second table rows
sourceTrs.forEach((trs, index) => {
const container = sourceContainers[index];
trs.forEach(tr => {
container.appendChild(tr);
});
});
}
// Call `fixTableCellWidth` after ready
document.addEventListener('DOMContentLoaded', () => {
fixTableCellWidth(document.getElementById('table1'), document.getElementById('table2'));
});
* {
box-sizing: border-box;
}
table {
border-collapse: collapse;
}
table td {
border: 1px solid;
}
First Table:
<table id="table1" width="600" border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>hdng 1</td>
<td>hdng 2</td>
<td>hdng 3</td>
<td>hdng 4</td>
<td>hdng 5</td>
</tr>
</tbody>
</table>
Second Table:
<table id="table2" width="600" border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>content content content</td>
<td>con</td>
<td>content content content</td>
<td>content content content</td>
<td>content content content</td>
</tr>
</tbody>
</table>
Define any css class and format the it and then use that class on both the tables e-g
your temp.css
.anyClass tr td{
width: 150p;
etc...
}
and in HTML file
<table id="table1" class="anyClass">
......
......
</table>
<table id="table2" class="anyClass">
......
......
</table>
I created this in jQuery for my div tables where I have two tables and table-cells are labels and form fields.
jQuery:
$(".table").last().children().find("label").css("table", $(".table").first().children().find("label").css("width"));
CSS:
.table {display:table;}
.table div {display: table-row;}
.table .formTitle {text-align: center;display: table-caption;}
.table select,
.table input,
.table label {display: table-cell;}
HTML:
<div class="table">
<div class="formTitle"><span id="txtBI"></span></div>
<div class="visTog"><label></label><input type="text" id="EntName"></div>
<div class="visTog opac"><label></label><select id="EntYear"></select></div>
<div class="visTog opac"><label></label><select id="EntMonth"></select></div>
<div class="visTog opac"><label></label><select id="EntDay"></select></div>
</div>
<div class="table">
<div class="visTog locrdsC formTitle"><span id="txtCalVal"></span></div>
<div class="visTog locrdsC"><label></label><input type="text" name="gmt" id="EntposGMT" class="locrds"></div>
<div class="visTog locrdsC"><label></label><input type="text" name="EntJday" id="EntJday" class="locrds"></div>
</div>
</div>
This has a catch though. Could write a script to measure which one is bigger but in my case that isn't necessary.
I tend to make forms more interactive to improve usability; hence the visibility toggle and opacity classes, but are of no consequence to the cell width function.
You can sync the column widths by combining the tables with a tbody for each (as suggested by #Relequestual), and using <th scope="rowgroup"> for the headers:
table {
border-collapse: collapse;
}
table thead,
table tbody {
border-bottom: solid;
}
table tbody th {
text-align: left;
}
<table>
<thead>
<tr> <th> ID <th> Measurement <th> Average <th> Maximum
<tbody>
<tr> <td> <th scope=rowgroup> Cats <td> <td>
<tr> <td> 93 <th scope=row> Legs <td> 3.5 <td> 4
<tr> <td> 10 <th scope=row> Tails <td> 1 <td> 1
<tbody>
<tr> <td> <th scope=rowgroup> English speakers <td> <td>
<tr> <td> 32 <th scope=row> Legs <td> 2.67 <td> 4
<tr> <td> 35 <th scope=row> Tails <td> 0.33 <td> 1
</table>
Source: Example in the HTML spec itself