This question already has answers here:
Splitting a table cell into two columns in HTML
(9 answers)
How to make one <td> span both columns in a two column table?
(3 answers)
Content of cell should take all row without changing columns width
(4 answers)
Closed 4 years ago.
I'm trying to create two columns in one <td> cell while leaving the rest of the table intact.
Here is a sample of what I'm trying to do
Here is a codepen with my table:
https://codepen.io/akamali/pen/XBVxxZ
I have tried to get it with colspan and add two columns <tr> inside but the result is always uneven. I also tried to add a table but did not look good at all. Any ideas?
Use colspan as follows:
.table {
width: 100%;
background-color: #ffffff;
border: 4px solid #979797;
}
.table td {
border-right: 2px solid #979797;
border-bottom: 4px solid #979797;
padding: 50px;
height: 10px;
}
.table td:nth-child(3n+0) {
border-right: 4px solid #979797;
}
.table td:last-child {
border-right: none;
}
.table tr:last-child td {
border-bottom: none;
}
<div>
<table class="table">
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td colspan="3"></td>
<td colspan="3"></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
Related
I want to make a table with 2 column at first and 3 column in the second row. The problem is, I cannot adjust them to my desired layout. I'm sorry if my question is hard to understand. I've attached a picture link for your reference.
table, td { border: 1px solid; }
<table>
<tr>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
</table>
the above picture is what I want.
That configuration is impossible using colspan unless there was a value of 1.5 for the top and bottom rows. But there is a way by nesting a <table> within a <td colspan='2'> in the middle row. Also, it's valid HTML.
* {
margin: 0;
padding: 0;
}
table {
table-layout: fixed;
width: 50%;
margin: 20px auto;
}
table,
td {
border: 1px solid;
border-spacing: 0.5px;
text-align: center;
}
td {
width: 50%;
}
table table {
table-layout: fixed;
width: 100%;
margin: 0;
border: 0;
}
table table td {
width: 33%;
}
<table>
<tbody>
<tr>
<td>X</td>
<td>X</td>
</tr>
<tr>
<td colspan='2' style='border: 0'>
<table>
<tr>
<td>X</td>
<td>X</td>
<td>X</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>X</td>
<td>X</td>
</tr>
</tbody>
</table>
I tried using boxed elements but it is not coming in a proper way!
Any kind of help is highly appreciated
https://codepen.io/saisree/pen/EXXQGO - link to codepen
<table>
<tr>
<td class="text-center" colspan="4">Aircraft Status Display</td>
</tr>
<tr>
<td> spare</br>STBY</td><td><div class="vr"></div>
</td>
</tr>
<tr>
<td style="width:80px;" ><p style="padding-top:20px;padding-bottom:20px;" class="boxed4 text-center"
><span class="br"></span></p>
</td>
<td style="width:80px;" ><p style="padding-top:20px;padding-bottom:20px;" class="boxed4 text-center"
><span class="br"></span></p>
</td>
<td style="width:80px;" ><p style="padding-top:20px;padding-bottom:20px;" class="boxed4 text-center"
><span class="br"></span></p>
</td>
</table>
Using colspan=n to make a column the width of n columns:
<table>
<tr>
<td></td><td colspan="6">this is wide column</td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td colspan="6">another wide column</td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
</table>
It's not completely clear from your image what you are trying to achieve, but if you mean the "half-open" cells, here is an example.
It uses col-spans to merge several cells into one, and different border settings: First a default setting for all cells (for borders on each side), the therse are overwritten by additional CSS rules that have special CSS selectors (with pseudo classes) to only affect certain cells:
table {
border-collapse: collapse;
width: 60%;
margin: 0 auto;
}
td {
border: 1px solid #333;
height: 40px;
}
tr:first-of-type > td {
border-bottom: none;
height: 20px;
}
tr:nth-of-type(2) > td {
border-top: none;
height: 40px;
}
tr:nth-of-type(4) > td:not(:first-child) {
border-bottom: none;
}
tr:nth-of-type(5) > td:not(:first-child) {
border-top: none;
}
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="4" ;></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="4" ;></td>
</tr> <tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
I have created these CSS classes:
.table-c {
border: 1px solid black;
width:100%;
height: 30px;
table-layout: fixed;
}
.table-c td {
border: 1px solid black;
padding: 10px;
}
And this table:
<table class="table-c">
<tr>
<td>REFERENCE NO.</td>
<td>DESCRIPTION</td>
<td>Invoice DATE</td>
<td>INVOICE AMOUNT</td>
<td>DISCOUNT TAKEN</td>
<td>AMOUNT PAID</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>CHECK DATA</td>
<td>CHECK NO.</td>
<td>PAYEE</td>
<td>DISCOUNT TAKEN</td>
<td>CHECK AMOUNT</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Table is fixed size as I wanted, but I also need to have different columns have different width. Those columns should not change with and always have it fixed. And also rows height should be fixed.
As in this example:
Here is my try:
http://jsfiddle.net/cbafseq6/
As you can see all columns have same width and all rows same height. If I would try for example set height on specific tr element (like style="height: 20px") all rows would still have same height.
If you want every row to have specific height and every column to have specific width, you can do something like the code below. I used your own code. You can tell me if that helps.
.table-c {
border: 1px solid black;
width:100%;
height: 30px;
table-layout: fixed;
}
.table-c td {
border: 1px solid black;
padding: 10px;
}
<table class="table-c">
<tr>
<td style="width: 10%">REFERENCE NO.</td>
<td style="width: 30%">DESCRIPTION</td>
<td style="width: 10%">Invoice DATE</td>
<td style="width: 10%">INVOICE AMOUNT</td>
<td style="width: 20%">DISCOUNT TAKEN</td>
<td style="width: 20%">AMOUNT PAID</td>
</tr>
<tr style="height: 200px">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table class="table-c">
<tr>
<td style="width: 20%">CHECK DATA</td>
<td style="width: 10%">CHECK NO.</td>
<td style="width: 40%">PAYEE</td>
<td style="width: 10%">DISCOUNT TAKEN</td>
<td style="width: 20%">CHECK AMOUNT</td>
</tr>
<tr style="height: 200px">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Not sure the table element is what you want to go with.
Custom width of cells within columns would be available by using multiple tables (one for each row), perhaps, but a single table cannot have columns change width every row.
Maybe try a div layout.
Regarding the height set on tr - you chose a height too small, so there is no effect, a larger value would make the row larger. Again, because of table display settings this works differently and you should probably look for a different layout option.
Just use 2 tables:
table {
border: solid black;
border-width: 0 1px;
width: 100%;
height: 30px;
table-layout: fixed;
border-spacing: 2px;
margin-top: -2px; /* same value as border-spacing */
}
td {
border: 1px solid black;
padding: 10px;
}
table:first-child {
border-top-width: 1px;
margin-top: 0;
}
table:last-child {
border-bottom-width: 1px;
}
<div>
<table>
<tr>
<td>REFERENCE NO.</td>
<td>DESCRIPTION</td>
<td>Invoice DATE</td>
<td>INVOICE AMOUNT</td>
<td>DISCOUNT TAKEN</td>
<td>AMOUNT PAID</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table>
<tr>
<td>CHECK DATA</td>
<td>CHECK NO.</td>
<td>PAYEE</td>
<td>DISCOUNT TAKEN</td>
<td>CHECK AMOUNT</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
Honestly, even though tables are meant to display tabular data, I would go with a div layout here.
You can easily do this with a wrapper and some floated div and then you can do any and all customization you like to any of the "cells". Just my .02
Assume I have a table that looks like this:
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
<td></td>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="2"></td>
<td></td>
<td colspan="2"></td>
</tr>
</table>
How do I select all the cells in the fourth column, including the td[colspan="2"] that spans to it with CSS?
It's not pretty but can be done with multiple selectors: http://jsfiddle.net/r4atjtfx/1/
tr:first-child td:nth-child(4),
tr:first-child + tr td[colspan="2"] ~ td[colspan="2"],
tr:last-child td:nth-child(3) {
color: orange;
}
But to answer your question no selector exists to target different table columns.
It has been awhile, but I was searching for this and came up with a better solution. A table can have multiple <tbody> elements and you can add a class to treat them differently.
<table>
<tbody class="first">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tbody class="second">
<tr>
<td colspan="2"></td>
<td></td>
<td colspan="2"></td>
<td></td>
</tr>
</tbody>
<tbody class="third">
<tr>
<td></td>
<td colspan="2"></td>
<td></td>
<td colspan="2"></td>
</tr>
</tbody>
</table>
You can then use nth-child selectors tailored to each tbody.
You can use nth-child to target elements in combination that with not and attr.
DEMO
tr>td:not([colspan])+td:nth-child(4):not([colspan]) {
background-color: yellowgreen;
}
tr>td[colspan]:nth-child(3) {
background-color: yellowgreen;
}
tr>td[colspan]:nth-child(2)+td {
background-color: yellowgreen;
}
CSS:
Demo on Fiddle
tr :nth-child(4), tr td[colspan="2"] {
color: red;
}
td {
border: 1px solid black;
}
jQuery:
Demo on Fiddle
for (i = 1; i < document.getElementsByTagName('tr').length * 2; i++) {
console.log($('table :nth-child(' + i +') :nth-child(4)').html());
console.log($('table :nth-child(' + i + ') td[colspan="2"]').html());
}
I have 6 columns & I want to use colspan for 3&4 and 5&6 column.
And I don't want to show 1st & 2nd column for that particular row.
How to hide 1&2 column in that row?
Desired output..
Remove the border from the cells you wish to "hide". They are still there, but visually absent.
Have a fiddle!
Experimental fiddle for a table { border: xxx; } fix.
In this example I am targeting the cell with tbody tr:first-child td:first-child. This could obviously also be targeted with a class.
HTML
<table>
<tbody>
<tr>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
CSS
table {
border-collapse: collapse;
width: 500px;
}
td {
border: solid 1px #000;
padding: 10px;
}
tbody tr:first-child td:first-child {
border: none;
}
Use display:none; in your CSS File on the 1st & 2nd Column.
You can select them with:
td:nth-of-type(1),
td:nth-of-type(2) {
display:none;
}
Use visibility:hidden on the first two columns of the row.
Try to use visibility: hidden; empty-cells: hide; for that cells.
Here is a fiddle
HTML
<table border="1">
<thead>
<tr>
<td colspan="2" style="border: 0;">a1</td>
<td colspan="2">a3</td>
<td colspan="2">a5</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>5555</td>
</tr>
</tbody>
</table>
CSS
table {
border: none;
border-collapse: collapse;
}