I am trying to create a table layout as shown in below image:
Below is my Html code:
<html>
<head>
<meta charset="UTF-8" />
<title>Table sketch</title>
<style>
table {
table-layout: fixed;
width: 20em;
}
td {
width: 4em;
height: 1.5em;
text-align: center;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td colspan="4"> 1 </td>
</tr>
<tr>
<td rowspan="2"> 2 </td>
<td rowspan="2"> 3 </td>
</tr>
<tr>
<td colspan="2"> 4 </td>
</tr>
<tr>
<td> 5 </td><td> 6 </td>
</tr>
<tr>
<td colspan="4"> 7 </td>
</tr>
</table>
</body>
But it generates below layout:
When I change rowspan value from 2 to 3 for second row. It gives me right layout.
<tr>
<td rowspan="3"> 2 </td>
<td rowspan="3"> 3 </td>
</tr>
Here is a link to jsbin.
But why is first html code not working?
Any help is much appreciated.
Thanks.
You have one tr tag too much: The second row has to contain 3 elements (i.e. no separate tr for the third element in that row):
table {
table-layout: fixed;
width: 20em;
}
td {
width: 4em;
height: 1.5em;
text-align: center;
}
<body>
<table border="1">
<tr>
<td colspan="4"> 1 </td>
</tr>
<tr>
<td rowspan="2"> 2 </td>
<td rowspan="2"> 3 </td>
<td colspan="2"> 4 </td>
</tr>
<tr>
<td> 5 </td><td> 6 </td>
</tr>
<tr>
<td colspan="4"> 7 </td>
</tr>
</table>
</body>
Related
I am using this code but it doesn't seem to work. Help. It just doesnt seem to work however hard I try.
<html>
<head>
</head>
<body>
<table height="100%" width="70%" border="3">
<tr>
<td rowspan="1"> A </td>
<td rowspan="2"> B </td>
<td rowspan="3"> C </td>
</tr>
<tr>
<td rowspan="2"> D </td>
</tr>
<tr>
<td> E </td>
</tr>
<tr>
<td> F </td>
<td> G </td>
<td> H </td>
</tr>
</table>
</body>
</html>
The above HTML renders as this:
...but I want it to look like this:
It helps if you visualize the raw table rows in a diagram. I've indicated those in pink:
Then we can see that:
A - no rowspan, no colspan.
B - rowspan="2", no colspan.
C - rowspan="3", no colspan.
D - rowspan="2", no colspan.
E - no rowspan, no colspan.
F - no rowspan, no colspan.
G - no rowspan, no colspan.
H - no rowspan, no colspan.
Let's start with a normal table without any rowspans (using * to denote cells that will be merged):
I've added a CSS rule to set height: 50px on all <td> elements for the sake of illustration. It doesn't affect the table's actual layout.
tr > td {
height: 50px; /* min-height on <td> doesn't work */
}
<table height="100%" width="70%" border="3">
<tr>
<td> A </td>
<td> B </td>
<td> C </td>
</tr>
<tr>
<td> D </td>
<td> B* </td>
<td> C* </td>
</tr>
<tr>
<td> D* </td>
<td> E </td>
<td> C* </td>
</tr>
<tr>
<td> F </td>
<td> G </td>
<td> H </td>
</tr>
</table>
Then let's add rowspans to the first row:
tr > td {
height: 50px; /* min-height on <td> doesn't work */
}
<table height="100%" width="70%" border="3">
<tr>
<td> A </td>
<td rowspan="2"> B </td>
<td rowspan="3"> C </td>
</tr>
<tr>
<td> D </td>
<!-- <td> B* </td> -->
<!-- <td> C* </td> -->
</tr>
<tr>
<td> D* </td>
<td> E </td>
<!-- <td> C* </td> -->
</tr>
<tr>
<td> F </td>
<td> G </td>
<td> H </td>
</tr>
</table>
Then let's add rowspans to the second row:
I've set different height values for each of the cells (in accordance to their rowspan), otherwise the middle row collapses (as there's nothing to prop it up).
tr > td {
}
tr > td.a {
height: 25px;
}
tr > td.b {
height: 50px;
}
tr > td.c {
height: 75px;
}
tr > td.d {
}
tr > td.e {
}
<table height="100%" width="70%" border="3">
<tr>
<td class="a"> A </td>
<td class="b" rowspan="2"> B </td>
<td class="c" rowspan="3"> C </td>
</tr>
<tr>
<td class="d" rowspan="2"> D </td>
<!-- <td> B* </td> -->
<!-- <td> C* </td> -->
</tr>
<tr>
<!-- <td> D* </td> -->
<td class="e"> E </td>
<!-- <td> C* </td> -->
</tr>
<tr>
<td> F </td>
<td> G </td>
<td> H </td>
</tr>
</table>
Ta-dah:
I've been struggling for over an hour to create a HTML table. I can't understand why it doesn't work or how I should combine the rowspans, colspans. If you could help me, I would be more than grateful to you:
I tried the following, all failed, some broke my previous templates as well:
td {
border: 2px solid;
height: 100px;
width: 100px;
}
<table>
<tr>
<td rowspan="5"></td>
<td rowspan="5"></td>
</tr>
<tr>
<td rowspan="3"></td>
<td rowspan="3"></td>
</tr>
<tr>
<td rowspan="3"></td>
<td rowspan="3"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
Please, help me.
Try with the following:
table { border-collapse: collapse; }
td {
border: 2px solid black;
height: 100px;
width: 100px;
}
<table>
<tr>
<td rowspan="2">A</td>
<td rowspan="2">A</td>
<td>B</td>
<td>B</td>
<td>C</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>C</td>
</tr>
</table>
I'm not sure why you used rowspans of 5 and 3 but the way it works is
you specify a rowspan or colspan and that fills in the grid of cells
<table>
<tr>
<td rowspan="5">a</td>
<td rowspan="5">b</td>
<td rowspan="3">c</td>
<td rowspan="3">d</td>
<td rowspan="3">e</td>
</tr>
Means we have 5 columns and 5 rows (so far)
+-+-+-+-+-+
|X|X|X|X|X| row 1
+-+-+-+-+-+
|X|X|X|X|X| row 2
+-+-+-+-+-+
|X|X|X|X|X| row 3
+-+-+-+-+-+
|X|X| | | | row 4
+-+-+-+-+-+
|X|X| | | | row 5
+-+-+-+-+-+
rows 2 and 3 need no cells (no <td>s) because they are already specified by the first row.
row 4 needs 3 <td> for the 3 unused cells
<tr>
<td rowspan="2">g</td>
<td rowspan="2">h</td>
<td rowspan="2">i</td>
</tr>
The grid is now full
+-+-+-+-+-+
|X|X|X|X|X| row 1
+-+-+-+-+-+
|X|X|X|X|X| row 2
+-+-+-+-+-+
|X|X|X|X|X| row 3
+-+-+-+-+-+
|X|X|X|X|X| row 4
+-+-+-+-+-+
|X|X|X|X|X| row 5
+-+-+-+-+-+
so row 5 needs no cells (no <td>s)
table { border-collapse: collapse; }
td {
border: 2px solid;
height: 100px;
width: 100px;
text-align: center;
}
<table>
<tr>
<td rowspan="5">a</td>
<td rowspan="5">b</td>
<td rowspan="3">c</td>
<td rowspan="3">d</td>
<td rowspan="3">e</td>
</tr>
<tr></tr>
<tr></tr>
<tr>
<td rowspan="2">g</td>
<td rowspan="2">h</td>
<td rowspan="2">i</td>
</tr>
<tr></tr>
</table>
This should look very closely to what you want to achieve. Important parts are border-collapse, rowspan, width of td, width of border, using class. This is one of many ways to do it.
td {
border: 4px solid;
height: 100px;
width: 50px;
}
table {
border-collapse: collapse;
}
.larger-width{
width: 75px;
}
<table>
<tr>
<td rowspan='2' class="larger-width"></td>
<td rowspan='2' class="larger-width"></td>
<td></td>
<td></td>
<td></td>
<td class="larger-width"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
[![<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table example</title>
<style>
table {
border-collapse: collapse;
}
table td {
border: 5px solid black;
}
</style>
</head>
<body>
<table border="2" cellpadding="50px">
<tr>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
Output will be
1]1
Try this solution, do modifications as you wish.
<table width="346" height="200" border="1">
<tbody>
<tr>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
I'm trying to make a fairly simple table with a rowspan, and it works as expected. However, the problem is with cells appearing after the all the spanned cells are resolved; they are not positioned where I think they should be.
Here's my code:
<html>
<body>
<table width="100%" border="1">
<tr>
<td rowspan="7">
7 row
</td>
<td>
1 row
</td>
</tr>
<tr>
<td>
1 row
</td>
</tr>
<tr>
<td rowspan="5">
5 row
</td>
</tr>
<tr>
<td>
<i>This shouldn't be here, but below and aligned to the left side of the table</i>
</td>
<td>
<i>This shouldn't be here, but below and aligned at the right side of the table</i>
</td>
</tr>
</table>
</body>
</html>
Here's how it renders in Chrome and Firefox (I don't have the reputation to post inline images at Stack Overflow):
http://embernet.com/misc/rowspan.gif
Those two wordy cells really should be in the columns 1 and 2 that were already established, not as new columns 3 and 4.
The problem seems to come from me spanning rows that are never individually realized. Keep in mind this is part of a larger, dynamically generated table that in some cases will show each of the 7 rows. I know someone will inevitably ask why I need to do this.
I don't see anything in the specs that suggests I cannot rowspan like this, so I'm hoping I'm just missing something obvious.
A JSFiddle is here: https://jsfiddle.net/mLard575/
I am not sure what you are expecting. I give two possibilities as per my understanding.
Choose as per your requirements
First Method:
table {
border-collapse: collapse;
}
td {
padding: 20px;
border: 1px solid black;
text-align: center;
}
<body>
<table>
<tbody>
<tr>
<td rowspan="7">7</td>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td rowspan="5"> 5 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
<td> 1 </td>
</tr>
</tbody>
</table>
</body>
Second Method:
table {
border-collapse: collapse;
}
td {
padding: 20px;
border: 1px solid black;
text-align: center;
}
<body>
<table>
<tbody>
<tr>
<td rowspan="7">7</td>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
<td> 1 </td>
</tr>
</tbody>
</table>
</body>
If these two methods are not suited for you. Just explain little bit more with diagram example to update the code.
I got my code sample saved on https://jsfiddle.net/n7ynjs1t/
All what I need is a simple normal table even with thead fixed on scroll.
CSS:
table {
width: 100%;
}
thead {
width: 100%;
display: table;
}
tbody {
overflow: auto;
height: 200px;
display: block;
}
td {
width: 100px;
}
HTML:
<thead>
<td width=100 align='center'> id </td>
<td width=100 align='center'> head1 </td>
<td width=100 align='center'> head2 </td>
<td width=100 align='center'> head3 </td>
<td width=100 align='center'> head4 </td>
<td width=100 align='center'> head5 </td>
<td width=100 align='center'> head6 </td>
<td width=100 align='center'> head7 </td>
<td width=100 align='center'> head8 </td>
<td width=100 align='center'> head9 </td>
<td width=100 align='center'> head10</td>
<td width=100 align='center'> head11</td>
</thead>
<tr>
<td width=100 align='center'> id </td>
<td width=100 align='center'> 1 </td>
<td width=100 align='center'> 2 </td>
<td width=100 align='center'> 3 </td>
<td width=100 align='center'> 4 </td>
<td width=100 align='center'> 5 </td>
<td width=100 align='center'> 6 </td>
<td width=100 align='center'> 7 </td>
<td width=100 align='center'> 8 </td>
<td width=100 align='center'> 9 </td>
<td width=100 align='center'> 0 </td>
<td width=100 align='center'> 11</td>
</tr>
// The same table rows repeats many times
</tbody>
</table>
I think the closest you will get is this.
You will not be able to "auto size" the headers with the table cells and vice versa, so those widths should be "hard coded".
Also, to make the headers "fit" and make up for the body's scrollbar, add padding. in the below code I added a padding of "15px" for the "thead", who does not have a scrollbar.
EDIT:
Here's a fiddle: https://jsfiddle.net/FredM7/25abq8gf/
See this full HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
table {
width: 200px;
background: green;
}
table tbody, table thead
{
display: block;
}
table thead
{
padding-right: 15px;
}
table tbody
{
overflow: auto;
height: 100px;
}
thead th, tbody td {
width: 72px;
text-align: left;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>
Head 1
</th>
<th>
Head 2
</th>
<th>
Head 3
</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
</tbody>
</table>
</body>
</html>
I am generating a PDF document using DOMPDF.
The html that is being 'printed to PDF' renders as expected in a browser.
However when using DOMPDF the CSS layout is ignored. Note: When using inline CSS <td style="width:2cm;"> the document renders properly. The desired and resulting outputs are shown below. As is a snippet of the code that renders improperly.
Thanks,
Desired Output:
DOMPDF Output:
<style type="text/css">
td {
display: table-cell;
vertical-align: top;
}
.num {
width: 1cm;
}
.spc {
width: 2cm;
}
.quanda {
width: 8cm;
}
</style>
<div>
<h1>Demographics</h1>
</div>
<div>
<hr/>
</div>
<div>
<table>
<tbody>
<tr>
<td class="num">1)</td>
<td class="quanda">Study ID</td>
<td class="spc"> </td>
<td class="quanda">2349723</td>
</tr>
<tr>
<td class="num">2)</td>
<td class="quanda">Date subject signed consent</td>
<td class="spc"> </td>
<td class="quanda">12 March 2012</td>
</tr>
<tr>
<td class="num">3)</td>
<td class="quanda">Upload the patient's consent form</td>
<td class="spc"> </td>
<td class="quanda">Uploaded: URL: </td>
</tr>
<tr>
<td class="num">4)</td>
<td class="quanda">First Name</td>
<td class="spc"> </td>
<td class="quanda">Bob</td>
</tr>
<tr>
<td class="num">5)</td>
<td class="quanda">Last Name</td>
<td class="spc"> </td>
<td class="quanda">Dylan</td>
</tr>
</tbody>
</table>
</div>