I have tried to make this work but it always adds an extra column in the first row even when i clearly stated it has only 1 column. What i want to make is like this : this is what i want to make
But this is what i get like this
The only way to make it like the first picture is by using 2 tables which is what i used but is there no way to do it with 1 table ?
My code :my code for the second picture
Use the colspan attribute.
td {
border: solid black 1px;
height: 20px;
}
<table>
<tr>
<td colspan="3">colspan = 3</td>
</tr>
<tr>
<td>colspan = 1</td>
<td>colspan = 1</td>
<td>colspan = 1</td>
</tr>
<tr>
<td colspan="3">colspan = 3</td>
</tr>
</table>
You can use the colspan attribute.
The colspan attribute in HTML specifies the number of columns a cell should span. It allows the single table cell to span the width of more than one cell or column.
Below is a working code snippet which looks almost similar to your requirement.
table, tr, td, th {
border: 1px solid black;
border-collapse: collapse;
}
table {
width: 100%;
}
.row1, .row2 {
height: 100px;
}
.row2 {
vertical-align: top;
}
.row1, .row3 {
text-align: center;
}
<table>
<tr class="row1">
<td colspan="3">Your Name</td>
</tr>
<tr class="row2">
<td>Course 1</td>
<td>Course 2</td>
<td>Course 3</td>
</tr>
<tr colspan="3" class="row3">
<td colspan="3">Social Media accounts</td>
</tr>
</table>
The example below contains two tables, and each table includes two sections. Both tables and sections are structurally the same.
When the cells in the first table that are marked with class ".to-hide" are hidden by changing this class to ".hide" (shown in the second table), the resulting layout of the second table appears inconsistent; the cell "4" in the first section closes all gaps left by the hidden cells, but cell "4" in the second section leaves open gaps.
On Chrome 68.0.3440.106, the code snippet below shows how one cell "4" fill open gaps, but the other cell "4" does not. On Firefox 60.0.2, both cells "4" leave open gaps. The image below is taken on Chrome 68.
How can I ensure that visible cells in the table cover any gaps left by hidden cells, consistently, across browsers?
/* Styles to mark and hide marked cells. */
.to-hide { background-color: lightgray; }
.hide { display: none; }
/* Styles to make the tables in the code snippet look pretty. */
.left { display: inline-block; }
.right { display: inline-block; margin-left: 20px; }
table { background-color: yellow; }
td { padding: 0 1em; background-color: white; border: solid 1px gray; }
<div class="left">
Original table:
<table>
<tbody>
<tr>
<td rowspan="3">1</td>
<td rowspan="2">.<br/>2<br/>.</td>
<td class="to-hide">3</td>
<td>4</td>
</tr>
<tr>
<td class="to-hide">a</td>
<td class="to-hide">b</td>
</tr>
<tr>
<td colspan="3">A</td>
</tr>
<tr>
<td colspan="4">i</td>
</tr>
<tr>
<td rowspan="3">1</td>
<td rowspan="2">.<br/>2<br/>.</td>
<td class="to-hide">3</td>
<td>4</td>
</tr>
<tr>
<td class="to-hide">a</td>
<td class="to-hide">b</td>
<tr>
<td colspan="3">A</td>
</tr>
<tr>
<td colspan="4">i</td>
</tr>
</tbody>
</table>
</div>
<div class="right">
Shaded cells hidden (notice cells "4"):
<table>
<tbody>
<tr>
<td rowspan="3">1</td>
<td rowspan="2">.<br/>2<br/>.</td>
<td class="hide">3</td>
<td>4</td>
</tr>
<tr>
<td class="hide">a</td>
<td class="hide">b</td>
</tr>
<tr>
<td colspan="3">A</td>
</tr>
<tr>
<td colspan="4">i</td>
</tr>
<tr>
<td rowspan="3">1</td>
<td rowspan="2">.<br/>2<br/>.</td>
<td class="hide">3</td>
<td>4</td>
</tr>
<tr>
<td class="hide">a</td>
<td class="hide">b</td>
<tr>
<td colspan="3">A</td>
</tr>
<tr>
<td colspan="4">i</td>
</tr>
</tbody>
</table>
</div>
By hiding cells "a" and "b" rowspan="3" of cell "1" wants to occupy the same area like cell "i". Cell "i" can not span 3 rows since there are only 3 rows left and on the last row spans cell "i" all columns.
Forcing hidden cells to a size of 0 does not help.
.hide {
visibility: hidden;
width: 0;
height: 0;
padding: 0;
}
Taking hidden cells out of flow by position: absolute does not help either.
That the first section of the table still looks good (no gaps) must be some kind of error correction by browser.
Only by removing hidden cells from the table and changing the values for rowspan and colspan I was able to achieve the intended distribution of cells.
<tr>
<td rowspan="2">1</td>
<td>.<br/>2<br/>.</td>
<td>4</td>
</tr>
<tr>
<td colspan="2">A</td>
</tr>
<tr>
<td colspan="3">i</td>
</tr>
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
So it is pretty straight forward. I need a way to group cells together. Like a <div> or a <span> but none of them worked. <tbody> seemed like a good solution but it only works for table rows. Help!
If you're looking for a way to merge 2 o more cells in a row into one single cell, along with other "regular" cells (as you would do in a google|excel spreadsheet) in a way similar to this:
then you can use the colspan attribute for td elements, indicating how many cells are you merging:
<tr>
<td colspan=2> Merged Cell occupying 2 columns </td>
</tr>
<tr>
<td> Regular cell </td>
<td> Another cell in same row </td>
</tr>
Additionally, you can use the td[colspan] selector in css (combined with any parent selector of your choice) to refer to these merged cells.
Here's a working example:
/* Style for cells with any colspan attribute */
td[colspan] {
text-align: center;
}
/* No extra space between cells */
table {
border-collapse: collapse;
}
th, td {
border: 1px solid gray;
margin: 0;
padding: 3px 10px;
text-align: right;
}
<table>
<tr>
<th>Day</th>
<th>Invoice</th>
<th>Total</th>
</tr>
<tr>
<!-- this cell will occupy 3 columns -->
<td colspan=3>January</td>
</tr>
<tr>
<td>2</td>
<td>0348</td>
<td>248.35</td>
</tr>
<tr>
<td>7</td>
<td>0349</td>
<td>126.14</td>
</tr>
<tr>
<td>18</td>
<td>0350</td>
<td>821.99</td>
</tr>
<tr>
<td colspan=3>February</td>
</tr>
<tr>
<td>27</td>
<td>0351</td>
<td>643.50</td>
</tr>
</table>
You can add the html col tag to group the columns td.
.col-group-1 {
background-color: yellow;
}
.col-group-2 {
background-color: silver;
}
<table>
<colgroup>
<col class="col-group-1">
<col span="2" class="col-group-2">
</colgroup>
<tr>
<th>Name</th>
<th>City</th>
<th>Phone</th>
</tr>
<tr>
<td>Mary</td>
<td>New york</td>
<td>987654321</td>
</tr>
<tr>
<td>Magdalena</td>
<td>Los Angeles</td>
<td>123456789</td>
</tr>
</table>
</body>
</html>
Please check out the html col tag
and how to use them with css styling
I have a HTML table consisting of 3 columns. It has a fixed width of 600px.
<table>
<tr>
<td>Name</td>
<td>Qty</td>
<td>Actions</td>
</tr>
</table>
I want the Qty and Actions columns to be as small as possible (keeping the content to one line) and the Name column to take up the rest of the available space. The size of the Qty and Actions column change depending on content/font size so fixed widths will not work in this case.
Is there a way of doing this in HTML/CSS? Or is this something I need to break out the Javascript for?
You can apply width="99%" on that column. For example:
<table>
<tr>
<td width="99%">Name</td>
<td>Qty</td>
<td>Actions</td>
</tr>
</table>
you can use max-width:99%; on the first column and give fixed sizes on the other columns (I used pixels sized columns).
<table style="width: 100%;">
<tr>
<td style="max-width: 99%">
Will max
</td>
<td style='width:110px;'>
fixed size here
</td>
</tr>
</table>
For every column you want to be the minimum width: (1) set the CSS width to zero and (2) use white-space: nowrap to prevent the text from wrapping onto multiple lines.
table {
width: 100%;
}
:where(th, td):not(.max) {
width: 0;
white-space: nowrap;
}
/* For demo purposes */
table, th, td {
border: 1px solid gray;
}
<table>
<tr>
<th class="max">Name</th>
<th>Qty</th>
<th>Actions</th>
</tr>
<tr>
<td class="max">Victoria Adelaide Mary Louisa</td>
<td>233,546,443</td>
<td>Abort Retry Fail</td>
</tr>
</table>