Issue
What I have so far looks like this code below..
<thead>
<tr>
<th>NAME</th>
<th>FIBER</th>
<th>TELEPHONE</th>
<th>COAXIAL</th>
<th>SUBSCRIBER FOC</th>
<th>SUBSCRIBER TLC</th>
<th>SUBSCRIBER CC</th>
<th>REMARKS</th>
</tr>
</thead>
but I want to achieve this layout..
+------+-------+-----------+---------+----------------+---------+
| | | | | SUBSCRIBER | |
| NAME | FIBER | TELEPHONE | COAXIAL +-----+-----+----+ REMARKS +
| | | | | FOC | TLC | CC | |
+------+-------+-----------+---------+-----+-----+----+---------+
| | | | | | | | |
| | | | | | | | |
| | | | | | | | |
| | | | | | | | |
| | | | | | | | |
| | | | | | | | |
+------+-------+-----------+---------+-----+-----+----+---------+
is it possible without using the CSS Grid?
Solution
Try to run the code following.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
</head>
<style>
th {
border: 1px solid black;
}
</style>
<body>
<table>
<thead>
<tr>
<th rowspan="2">NAME</th>
<th rowspan="2">FIBER</th>
<th rowspan="2">TELEPHONE</th>
<th rowspan="2">COAXIAL</th>
<th rowspan="1" colspan="3">SUBSCRIBER</th>
<th rowspan="2">REMARKS</th>
</tr>
<tr>
<th>FOC</th>
<th>TLC</th>
<th>CC</th>
</tr>
</thead>
<tbody>
<tr>
<td>value</td>
<td>value</td>
<td>value</td>
<td>value</td>
<td>value</td>
<td>value</td>
<td>value</td>
<td>value</td>
</tr>
</tbody>
</table>
</body>
</html>
Hope it helps for you. Thanks.
Answered By - RedGhost
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.