I have several php generated tables like below, and I tried to add a table line on the 3rd and 4th row but I failed.
What I tried is this:
table.tbc td:nth-child(3) {
border-bottom: 0.12em solid #000000;
}
<table class='tbc'>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>A</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>B</td>
</tr>
<tr>
<td>A</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>E</td>
</tr>
<tr>
<td></td>
</tr>
</table>
How can I do this? I know this is an unusual table structure.
If I understand you correctly, you want to add a border between the 3rd and 4th trs. If so, the right selector is table.tbc tr:nth-child(3) td
table.tbc tr:nth-child(3) td {
border-bottom: 0.12em solid #000000;
}
<table class='tbc'>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>A</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>B</td>
</tr>
<tr>
<td>A</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>E</td>
</tr>
<tr>
<td></td>
</tr>
</table>
Related
I want the rows corresponding to the headers label 1, label 2, etc. to be collapsed by default, and for the user to be able to expand the rows by clicking on the span element beside the label in the headers. I want header 1, header 2, etc. to be expanded by default, and the user should not be able to interact with those headers. This is my attempt (currently only 1 row per label header gets collapsed, but I want all of the rows to be collpased).
$(document).ready(function() {
$('th.header').nextUntil('th.header').slideToggle(100);
$('th.header').click(function() {
$(this).find('span').text(function(_, value) {
return value == '-' ? '+' : '-'
});
$(this).nextUntil('th.header').slideToggle(100, function() {});
});
});
table,
tr,
td,
th {
border: 1px solid black;
border-collapse: collapse;
}
th.header {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="0">
<tr>
<th>header 1</th>
<th>header 2</th>
<th>header 3</th>
<th>header 4</th>
</tr>
<tr>
<th class="header" rowspan="5">label 1 <span>-</span></th>
<td>A</td>
<td></td>
<td></td>
</tr>
<tr>
<td>B</td>
<td></td>
<td></td>
</tr>
<tr>
<td>C</td>
<td></td>
<td></td>
</tr>
<tr>
<td>D</td>
<td></td>
<td></td>
</tr>
<tr>
<td>E</td>
<td></td>
<td></td>
</tr>
<tr>
<th class="header" rowspan="5">label 2 <span>-</span></th>
<td>A</td>
<td></td>
<td></td>
</tr>
<tr>
<td>B</td>
<td></td>
<td></td>
</tr>
<tr>
<td>C</td>
<td></td>
<td></td>
</tr>
<tr>
<td>D</td>
<td></td>
<td></td>
</tr>
<tr>
<td>E</td>
<td></td>
<td></td>
</tr>
<tr>
<th class="header" rowspan="5">label 3 <span>-</span></th>
<td>A</td>
<td></td>
<td></td>
</tr>
<tr>
<td>B</td>
<td></td>
<td></td>
</tr>
<tr>
<td>C</td>
<td></td>
<td></td>
</tr>
<tr>
<td>D</td>
<td></td>
<td></td>
</tr>
<tr>
<td>E</td>
<td></td>
<td></td>
</tr>
</table>
Any help would be greatly appreciated!
Curious how to make a TD cell bigger without adjusting the height of the entire row?
I know I can do do inline styling with "rowspan= 7", but that centers the data in the middle of the cell.
I am trying to build a table like this image and don't know how to size "Some Data" and "Other Data" cells like so..
table {
text-align: center;
border: 1px solid black;
border-collapse: collapse;
}
td {
width: 30vw;
border: 1px solid black;
}
<table>
<tr>
<td></td>
<td>Heading</td>
<td>Heading 2</td>
</tr>
<tr>
<td rowspan="8">Some Data</td>
<td>546</td>
<td>X</td>
</tr>
<tr>
<td>546</td>
<td></td>
</tr>
<tr>
<td>546</td>
<td>X</td>
</tr>
<tr>
<td>546</td>
<td></td>
</tr>
<tr>
<td>546</td>
<td>X</td>
</tr>
<tr>
<td>546</td>
<td></td>
</tr>
<tr>
<td>546</td>
<td></td>
</tr>
<tr>
<td>546</td>
<td></td>
</tr>
<tr>
<td rowspan="8">Other Data</td>
<td>123</td>
<td>Y</td>
</tr>
<tr>
<td>123</td>
<td></td>
</tr>
<tr>
<td>123</td>
<td>Y</td>
</tr>
<tr>
<td>123</td>
<td></td>
</tr>
<tr>
<td>123</td>
<td>Y</td>
</tr>
<tr>
<td>123</td>
<td></td>
</tr>
<tr>
<td>123</td>
<td></td>
</tr>
<tr>
<td>123</td>
<td></td>
</tr>
</table>
Simply add a class to the table cells with rowspan. I used the class: .rowspan. Then use css to declare: vertical-align: top; and the issue is solved.
table {
text-align: center;
border: 1px solid black;
border-collapse: collapse;
}
td {
width: 30vw;
border: 1px solid black;
}
.rowspan {
vertical-align: top;
}
<table>
<tr>
<td></td>
<td>Heading</td>
<td>Heading 2</td>
</tr>
<tr>
<td rowspan="8" class="rowspan">Some Data</td>
<td>546</td>
<td>X</td>
</tr>
<tr>
<td>546</td>
<td></td>
</tr>
<tr>
<td>546</td>
<td>X</td>
</tr>
<tr>
<td>546</td>
<td></td>
</tr>
<tr>
<td>546</td>
<td>X</td>
</tr>
<tr>
<td>546</td>
<td></td>
</tr>
<tr>
<td>546</td>
<td></td>
</tr>
<tr>
<td>546</td>
<td></td>
</tr>
<tr>
<td rowspan="8" class="rowspan">Other Data</td>
<td>123</td>
<td>Y</td>
</tr>
<tr>
<td>123</td>
<td></td>
</tr>
<tr>
<td>123</td>
<td>Y</td>
</tr>
<tr>
<td>123</td>
<td></td>
</tr>
<tr>
<td>123</td>
<td>Y</td>
</tr>
<tr>
<td>123</td>
<td></td>
</tr>
<tr>
<td>123</td>
<td></td>
</tr>
<tr>
<td>123</td>
<td></td>
</tr>
</table>
How can I merge row and column as the figure blow in HTML?
After trying many times, I found the solution.
<table border="1">
<tr>
<td rowspan="3">No</td>
<td rowspan="3">Province</td>
<td colspan="2">Level</td>
<td>Other</td>
</tr>
<tr>
<td colspan="2">XL</td>
<td></td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td></td>
</tr>
<tr>
<td>001</td>
<td>Province #1</td>
<td>5</td>
<td>9</td>
<td></td>
</tr>
<tr>
<td>002</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
https://jsfiddle.net/tn7rd9sq/
I need create the table of this image:
<table border='1'>
<tr>
<th rowspan="3">text</th>
<th colspan="2">text</th>
</tr>
<tr>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>other text</td>
<td>2</td>
<td>2</td>
</tr>
</table>
I do not know how to do the part when there are 3 together
td {
width: 20px;
height: 20px;
}
td.wider {
width: 60px;
}
tr.taller {
height: 40px;
}
<table border='1'>
<tr class="taller">
<td class="wider" rowspan="3"></td>
<td colspan="6"></td>
</tr>
<tr>
<td colspan="3"></td>
<td colspan="3"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Hi
The form is a word document and I have been trying to recreate it exactly as is with html but having difficulty unfotunately.
This is what I have so far. Perhaps, css is the reason why it isn't laying out correctly.
Thanks for your assistance.
CSS - Must have:
<style type="text/css">
table .mystyle
{
border-width: 0 0 1px 1px;
border-spacing: 0;
border-collapse: collapse;
border-style: solid;
border-color:#000;
width:900px;
}
.mystyle td, .mystyle th
{
margin: 0;
padding: 4px;
border-width: 1px 1px 0 0;
border-style: solid;
font-size:medium;
border-color:#000;
}
</style>
Current html:
<table class="mystyle">
<tr>
<td style="width:50px;" class="style7"> </td>
<td style="width:158px;" class="style7">Milestone</td>
<td style="width:158px;" class="style7">Owner</td>
<td style="width:108px;white-space:nowrap;">
<TABLE border="1">
<TR>
<TD colspan="2">Completion Date</TD>
</TR>
<TR>
<TD>Target</TD>
<TD>Actual</TD>
</TR>
</TABLE>
</td>
<td style="width:358px;" class="style7">Comments</td>
</tr>
<tr>
</tr>
</table>
Extreme left are Qtr 1 through Qtr4
The key to laying out that table is using rowspan and colspan attributes.
http://tinker.io/174de/1
<table class="mystyle">
<thead>
<tr>
<th rowspan="2">Quarter</th>
<th rowspan="2">Milestone</th>
<th rowspan="2">Owner</th>
<th colspan="2">Completion Date</th>
<th rowspan="2">Comments</th>
</tr>
<tr>
<th>Target</th>
<th>Actual</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="3">Q1</th>
<td>a</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>b</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>c</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<th rowspan="3">Q2</th>
<td>a</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>b</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>c</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>