Displacement of the inner table's values - html

My HTML page has table and 2 inner tables inside as td inside tr. The problem I have encountered is displacement in a case when values in two tables are different in terms of characters value. Here's my page:
<html>
<head>
</head>
<body>
<table>
<tr>
<td>1st input field</td>
</tr>
<tr>
<td>
<table style="width: 100%">
<tr>
<td>All:</td>
<td>500</td>
<td>$</td>
</tr>
<tr>
<td>part1:</td>
<td>100</td>
<td>$</td>
</tr>
<tr>
<td>part2:</td>
<td>140</td>
<td>$</td>
</tr>
<tr>
<td>part3:</td>
<td>260</td>
<td>$</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>2nd input field</td>
</tr>
<tr>
<td>
<table style="width: 100%">
<tr>
<td>All:</td>
<td>700</td>
<td>$</td>
</tr>
<tr>
<td>part1:</td>
<td>200</td>
<td>$</td>
</tr>
<tr>
<td>part2:</td>
<td>200</td>
<td>$</td>
</tr>
<tr>
<td>part3:</td>
<td>300</td>
<td>$</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Now let's say that inside 1st inner table property all has 7 chars:
<html>
<head>
</head>
<body>
<table>
<tr>
<td>1st input field</td>
</tr>
<tr>
<td>
<table style="width: 100%">
<tr>
<td>All:</td>
<td>500.123</td>
<td>$</td>
</tr>
<tr>
<td>part1:</td>
<td>100</td>
<td>$</td>
</tr>
<tr>
<td>part2:</td>
<td>140</td>
<td>$</td>
</tr>
<tr>
<td>part3:</td>
<td>260</td>
<td>$</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>2nd input field</td>
</tr>
<tr>
<td>
<table style="width: 100%">
<tr>
<td>All:</td>
<td>700</td>
<td>$</td>
</tr>
<tr>
<td>part1:</td>
<td>200</td>
<td>$</td>
</tr>
<tr>
<td>part2:</td>
<td>200</td>
<td>$</td>
</tr>
<tr>
<td>part3:</td>
<td>300</td>
<td>$</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Thankfully, every value from the first table "went" to the left, but in the 2nd table values remain still on its positions. How can I change it?


Well, I needed to redesign your codes, I removed the child tables and added colspan to the header. Although I'm not sure why you needed to use another table as children.
<table>
<tr>
<td colspan="3">1st input field</td>
</tr>
<tr>
<td>
<tr>
<td>All:</td>
<td>500.123</td>
<td>$</td>
</tr>
<tr>
<td>part1:</td>
<td>100</td>
<td>$</td>
</tr>
<tr>
<td>part2:</td>
<td>140</td>
<td>$</td>
</tr>
<tr>
<td>part3:</td>
<td>260</td>
<td>$</td>
</tr>
</td>
</tr>
<tr>
<td colspan="3">2nd input field</td>
</tr>
<tr>
<td>
<tr>
<td>All:</td>
<td>700</td>
<td>$</td>
</tr>
<tr>
<td>part1:</td>
<td>200</td>
<td>$</td>
</tr>
<tr>
<td>part2:</td>
<td>200</td>
<td>$</td>
</tr>
<tr>
<td>part3:</td>
<td>300</td>
<td>$</td>
</tr>
</td>
</tr>
</table>


The reason here is you have not set sizes for table cells. Cell with number 500.123 in it has more width, so the column becomes much wider, then in the second table. You can solve the problem by using simple CSS, just set some classes and then set them certain width.
td {
border: 1px solid black;
}
tr td:first-child {
width: 40px;
}
tr td:nth-child(2) {
width: 50px;
}
<html>
<head>
</head>
<body>
<table>
<tr>
<td>1st input field</td>
</tr>
<tr>
<td>
<table style="width: 100%">
<tr>
<td>All:</td>
<td>500.123</td>
<td>$</td>
</tr>
<tr>
<td>part1:</td>
<td>100</td>
<td>$</td>
</tr>
<tr>
<td>part2:</td>
<td>140</td>
<td>$</td>
</tr>
<tr>
<td>part3:</td>
<td>260</td>
<td>$</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>2nd input field</td>
</tr>
<tr>
<td>
<table style="width: 100%;">
<tr>
<td>All:</td>
<td>700</td>
<td>$</td>
</tr>
<tr>
<td>part1:</td>
<td>200</td>
<td>$</td>
</tr>
<tr>
<td>part2:</td>
<td>200</td>
<td>$</td>
</tr>
<tr>
<td>part3:</td>
<td>300</td>
<td>$</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Related

How to set the entire row height twice as the others in html table

I have two tables. One with additional invisible <td> and one without. The problem is that the second table's rowspan is not working, the entire row just collapses. How could I get the result like in the first table without adding that unnecessary <td>?
HTML:
.table-height td {
height: 30px;
}
.invisible {
width: 1px;
}
<p>
<table border="2" class='table-height'>
<tbody>
<tr>
<td rowSpan="2">A1</td>
<td rowSpan="2">A2</td>
<td rowSpan="2">A3</td>
<td rowSpan="2">A4</td>
<td className='invisible'></td>
</tr>
<tr>
<td className='invisible'></td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
<td className='invisible'></td>
</tr>
<tr>
<td>D1</td>
<td>D2</td>
<td>D3</td>
<td>D4</td>
<td className='invisible'></td>
</tr>
</tbody>
</table>
</p>
<p>
<table border="2" class='table-height'>
<tbody>
<tr>
<td rowSpan="2">A1</td>
<td rowSpan="2">A2</td>
<td rowSpan="2">A3</td>
<td rowSpan="2">A4</td>
</tr>
<tr>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
</tr>
<tr>
<td>D1</td>
<td>D2</td>
<td>D3</td>
<td>D4</td>
</tr>
</tbody>
</table>
</p>

Finally I got it right. I just need to set the height for <tr> too (same as for </td>)
.table-height td, tr {
height: 30px;
}
.invisible {
width: 1px;
}
<p>
<table border="2" class='table-height'>
<tbody>
<tr>
<td rowSpan="2">A1</td>
<td rowSpan="2">A2</td>
<td rowSpan="2">A3</td>
<td rowSpan="2">A4</td>
</tr>
<tr>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
</tr>
<tr>
<td>D1</td>
<td>D2</td>
<td>D3</td>
<td>D4</td>
</tr>
</tbody>
</table>
</p>

How to separate nested table conspicuously?

How can i separate nested table in lower table as conspicuously as in upper table?
Upper table is not proper though.
I am trying to get Settlements Finance Time 3 Time 5 Bad Good in a single line in lower table.
Here is my code:
.my-table {
border: 1px solid #000;
}
.my-table tr:nth-child(even) {
background: #ddd;
}
.my-table tr:nth-child(odd) {
background: #fff;
}
<table class="my-table">
<tr>
<th>Service</th>
<th>Provider</th>
<th>Check</th>
<th>Marker</th>
<th>Captured Time</th>
<th>Final Time</th>
<th>Status</th>
<th>Comments</th>
</tr>
<tr>
<th>Sub Heading</th>
</tr>
<tr>
<td>Custody C</td>
<td>I</td>
<td>
<table>
<tr>
<td>Settlements</td>
<td>Finance</td>
<td>Time 3</td>
<td>Time 5</td>
<td>Bad</td>
<td>Good</td>
</tr>
</table>
<table>
<tr>
<td>Crossroad</td>
<td>
<table>
<tr>
<td>Complete</td>
</tr>
<tr>
<td>Partial</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Time 4a</td>
</tr>
<tr>
<td>Time 4b</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Time 6a</td>
</tr>
<tr>
<td>Time 6b</td>
</tr>
</table>
</td>
<td>Ok</td>
<td>danke</td>
</tr>
</table>
</td>
</tr>
</table>
<br>
<table class="my-table">
<tr>
<th>Service</th>
<th>Provider</th>
<th>Check</th>
<th>Marker</th>
<th>Captured Time</th>
<th>Final Time</th>
<th>Status</th>
<th>Comments</th>
</tr>
<tr>
<th>Sub Heading</th>
</tr>
<tr>
<td>Custody T</td>
<td>G</td>
<td>
<table>
<tr>
<td>Trades</td>
</tr>
<tr>
<td>Position</td>
</tr>
</table>
</td>
<td>Latest</td>
<td>TIME 1</td>
<td>TIME 2</td>
<td>Good</td>
<td>My Comments</td>
</tr>
<tr>
<td>Custody C</td>
<td>I</td>
<td>
<table>
<tr>
<td>Settlements</td>
</tr>
<tr>
<td>Crossroad</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Finance</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>Complete</td>
</tr>
<tr>
<td>Partial</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Time 3</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>Time 4a</td>
</tr>
<tr>
<td>Time 4b</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
Time 5
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>Time 6a</td>
</tr>
<tr>
<td>Time 6b</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Bad</td>
</tr>
<tr>
<td>Ok</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Good</td>
</tr>
<tr>
<td>danke</td>
</tr>
</table>
</td>
</tr>
<tr>
</tr>
</table>

To answer the question:
I am trying to get Settlements Finance Time 3 Time 5 Bad Good in a single line in lower table.
Vertically aligning your table cells will bring the content to the top of the cells, regardless of how many lines of content follows.
.my-table td {
vertical-align: top;
}
JSFiddle Example: https://jsfiddle.net/jennifergoncalves/y1Lr0mzw/
Please let me know if I missed what you were trying to accomplish.

how to remove space in html table

I have requirement to distributing rows equally in table.
We assume there are 19 records in database. So we have to arrange data in following maner
ASC1 ASC8 ASC14
ASC2 ASC9 ASC15
ASC3 ASC10 ASC16
ASC4 ASC11 ASC17
ASC5 ASC12 ASC18
ASC6 ASC13 ASC19
ASC7
user will select in how many columns he want to display data. Assume he select as columns to display so output should be first column : 7 rows , second column : 6 rows and Third column: 6 rows. So basically its dynamic display.
I have completed all Logic but somehow i am getting Space in second and Third row. Here is my html output
<table style='width:480px' border='1'>
<tr>
<td style='width:160px'>
<table>
<tr>
<td>ASC1</td>
</tr>
</table>
<table>
<tr>
<td>ASC2</td>
</tr>
</table>
<table>
<tr>
<td>ASC3</td>
</tr>
</table>
<table>
<tr>
<td>ASC4</td>
</tr>
</table>
<table>
<tr>
<td>ASC5</td>
</tr>
</table>
<table>
<tr>
<td>ASC6</td>
</tr>
</table>
<table>
<tr>
<td>ASC7</td>
</tr>
</table>
</td>
<td style='width:160px'>
<table>
<tr>
<td>ASC8</td>
</tr>
</table>
<table>
<tr>
<td>ASC9</td>
</tr>
</table>
<table>
<tr>
<td>ASC10</td>
</tr>
</table>
<table>
<tr>
<td>ASC11</td>
</tr>
</table>
<table>
<tr>
<td>ASC12</td>
</tr>
</table>
<table>
<tr>
<td>ASC13</td>
</tr>
</table>
</td>
<td style='width:160px'>
<table>
<tr>
<td>ASC14</td>
</tr>
</table>
<table>
<tr>
<td>ASC15</td>
</tr>
</table>
<table>
<tr>
<td>ASC16</td>
</tr>
</table>
<table>
<tr>
<td>ASC17</td>
</tr>
</table>
<table>
<tr>
<td>ASC</td>
</tr>
</table>
<table>
<tr>
<td>ASC</td>
</tr>
</table>
</td>
</tr>
</table>
Text ASC8 and ASC14 should align text ASC1. Can you help me?

You can add a vertical align and set it to top:
table td, table td * {
vertical-align: top;
}
See it live:
<style>
table td, table td * {
vertical-align: top;
}
</style>
<table style='width:480px' border='1'>
<tr>
<td style='width:160px'>
<table>
<tr>
<td>ASC1</td>
</tr>
</table>
<table>
<tr>
<td>ASC2</td>
</tr>
</table>
<table>
<tr>
<td>ASC3</td>
</tr>
</table>
<table>
<tr>
<td>ASC4</td>
</tr>
</table>
<table>
<tr>
<td>ASC5</td>
</tr>
</table>
<table>
<tr>
<td>ASC6</td>
</tr>
</table>
<table>
<tr>
<td>ASC7</td>
</tr>
</table>
</td>
<td style='width:160px'>
<table>
<tr>
<td>ASC8</td>
</tr>
</table>
<table>
<tr>
<td>ASC9</td>
</tr>
</table>
<table>
<tr>
<td>ASC10</td>
</tr>
</table>
<table>
<tr>
<td>ASC11</td>
</tr>
</table>
<table>
<tr>
<td>ASC12</td>
</tr>
</table>
<table>
<tr>
<td>ASC13</td>
</tr>
</table>
</td>
<td style='width:160px'>
<table>
<tr>
<td>ASC14</td>
</tr>
</table>
<table>
<tr>
<td>ASC15</td>
</tr>
</table>
<table>
<tr>
<td>ASC16</td>
</tr>
</table>
<table>
<tr>
<td>ASC17</td>
</tr>
</table>
<table>
<tr>
<td>ASC</td>
</tr>
</table>
<table>
<tr>
<td>ASC</td>
</tr>
</table>
</td>
</tr>
</table>

setting rowspan in td table

i wanna create something like this in my table
i try with this code, but the result far from what i want
<table>
<tr>
<td rowspan="3">No</td>
<td rowspan="3">Item1</td>
</tr>
<tr>
<td>SubItem1a</td>
<td>Subitem1b</td>
<td>Subitem1c</td>
</tr>
<tr>
<td>AnotherSub1a</td>
<td>AnotherSub1b</td>
<td>AnotherSub1c</td>
</tr>
</table>
or
<table>
<tr>
<td rowspan="3">No</td>
<td rowspan="3">Item1</td>
<td>
<tr>SubItem1a</tr>
<tr>Subitem1b</tr>
<tr>Subitem1c</tr>
</td>
<td>
<tr>AnotherSub1a</tr>
<tr>AnotherSub1b</tr>
<tr>AnotherSub1c</tr>
</td>
</tr>
</table>
how to archive table like image?

Now used to this code rowspan Attribute
<table border="1" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
<tr>
<td rowspan="3" align="center">No</td>
<td rowspan="3" align="center">Item1</td>
<td>SubItem1a</td>
<td>SubItem1a</td>
</tr>
<tr>
<td>Subitem1b</td>
<td>Subitem1c</td>
</tr>
<tr>
<td>AnotherSub1b</td>
<td>AnotherSub1c</td>
</tr>
</table>

This will help with your future reference.
I did some example hopefully you understand what is rowspan and colspan.
<h1> Without using Rowspan </h1>
<table border="1">
<tr>
<th>How</th>
<th>it</th>
<th>Work</th>
<th>Rowspan</th>
<th>First</th>
</tr>
<tr>
<td>10</td>
<td >20</td>
<td >30</td>
<td >40</td>
<td >50</td>
</tr>
<tr>
<td>60</td>
</tr>
<tr>
<td>70</td>
<td>80</td>
<td>90</td>
<td>100</td>
<td>110</td>
</tr>
</table>
<hr>
<h1> using Rowspan </h1>
<table border="1">
<tr>
<th>How</th>
<th>it</th>
<th>Work</th>
<th>Rowspan</th>
<th>First</th>
</tr>
<tr>
<td rowspan="2">10</td>
<td rowspan="2">20</td>
<td rowspan="2">30</td>
<td rowspan="2" >40</td>
<td >50</td>
</tr>
<tr>
<td>60</td>
</tr>
<tr>
<td>70</td>
<td>80</td>
<td>90</td>
<td>100</td>
<td>110</td>
</tr>
</table>
<hr>
<h1> using colspan </h1>
<table border="1">
<tr>
<th colspan="5">Hello World</th>
</tr>
<tr>
<th>How</th>
<th>it</th>
<th>Work</th>
<th>Rowspan</th>
<th>First</th>
</tr>
<tr>
<td rowspan="2">10</td>
<td rowspan="2">20</td>
<td rowspan="2">30</td>
<td rowspan="2" >40</td>
<td >50</td>
</tr>
<tr>
<td>60</td>
</tr>
<tr>
<td>70</td>
<td>80</td>
<td>90</td>
<td>100</td>
<td>110</td>
</tr>
</table>
DEMO

HTML Table not displaying properly

Hey guys I was creating this table table recently in HTML.
image:http://imgur.com/wPXCwrd
The table (shown in image) created perfectly but a weird blank row was created (marked red in image). When I tried to delete that code the entire cells below the QUESTIONS row gets shifted (image link:http://imgur.com/jBfmNGV).
How do I remove that blank cell after MEN cell?
CODE:
<!DOCTYPE html>
<html>
<body>
<table align="left" border="1" cellpadding="3" cellspacing="3">
<tbody>
<tr>
<td colspan="5">QUESTIONAIRE RESULTS</td>
</tr>
<tr>
<td rowspan="3">QUESTIONS</td>
<td colspan="2" rowspan="2">WOMEN</td>
<td colspan="2" rowspan="2">MEN</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>YES</td>
<td>NO</td>
<td>YES</td>
<td>NO</td>
</tr>
<tr>
<td>Question 1</td>
<td>42%</td>
<td>58%</td>
<td>61%</td>
<td>39%</td>
</tr>
<tr>
<td>Question 2</td>
<td>53%</td>
<td>47%</td>
<td>69%</td>
<td>31%</td>
</tr>
<tr>
<td>Question 3</td>
<td>26%</td>
<td>74%</td>
<td>51%</td>
<td>49%</td>
</tr>
<tr>
<td>Question 4</td>
<td>40%</td>
<td>60%</td>
<td>60%</td>
<td>40%</td>
</tr>
</tbody>
</table>
</body>
</html>

Just remove the :
<td> </td>
so your final code will be :
<!DOCTYPE html>
<html>
<body>
<table align="left" border="1" cellpadding="3" cellspacing="3">
<tbody>
<tr>
<td colspan="5">QUESTIONAIRE RESULTS</td>
</tr>
<tr>
<td rowspan="3">QUESTIONS</td>
<td colspan="2" rowspan="2">WOMEN</td>
<td colspan="2" rowspan="2">MEN</td>
</tr>
<tr>
</tr>
<tr>
<td>YES</td>
<td>NO</td>
<td>YES</td>
<td>NO</td>
</tr>
<tr>
<td>Question 1</td>
<td>42%</td>
<td>58%</td>
<td>61%</td>
<td>39%</td>
</tr>
<tr>
<td>Question 2</td>
<td>53%</td>
<td>47%</td>
<td>69%</td>
<td>31%</td>
</tr>
<tr>
<td>Question 3</td>
<td>26%</td>
<td>74%</td>
<td>51%</td>
<td>49%</td>
</tr>
<tr>
<td>Question 4</td>
<td>40%</td>
<td>60%</td>
<td>60%</td>
<td>40%</td>
</tr>
</tbody>
</table>
</body>
</html>
Preview: https://jsfiddle.net/3q6n9v7k/

A more correct answer would be the changing the rowspan and colspan.
Instead of
<tr>
<td rowspan="3">QUESTIONS</td> //
<td colspan="2" rowspan="2">WOMEN</td>
<td colspan="2" rowspan="2">MEN</td>
</tr>
Do this
<tr>
<td rowspan="2">QUESTIONS</td>
<td colspan="2" rowspan="1">WOMEN</td>
<td colspan="2" rowspan="1">MEN</td>
</tr>
Also remove :
<tr>
<td> </td>
</tr>
check out Fiddle