I have a nested table but for some reason, the CSS selector seems broken after the nested table.
.yellow {
background-color: yellow;
}
<table>
<tr class="yellow">
<td>1</td>
<td>2</td>
<td>3</td>
<td>
<table>
<tr>
<td>4</td>
</tr>
</table>
<td/>
</tr>
<tr>
<table>
<tr class="yellow">
<td>
5
</td>
</tr>
</table>
</tr>
<tr class="yellow">
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</table>
https://jsbin.com/zuxagenoba/edit?html,css,output
the issue is that your nested table (the one which contains 5) is a direct child of tr element and you have a missing td element. Wrapping that table with and fixes the issue.
See code snippet below
.yellow {
background-color: yellow;
}
<table>
<tr class="yellow">
<td>1</td>
<td>2</td>
<td>3</td>
<td>
<table>
<tr>
<td>4</td>
</tr>
</table>
<td/>
</tr>
<tr>
<td>
<table>
<tr class="yellow">
<td>
5
</td>
</tr>
</table>
</td>
</tr>
<tr class="yellow">
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</table>
Related
I had a problem while creating a small table with specific details like in the pic enter image description here
I did this code but it doesn't give the wanted results
<html>
<head>
<style>
table,td,th{border: 2px solid gray; text-align:center}
</style>
</head>
<body>
<table width="30%">
<tr>
<td colspan="4">1</td>
<td colspan="3">2</td>
</tr>
<tr>
<td>3</td>
<td rowspan="2" colspan="8">4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td colspan="4">6<td>
<td>7<td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</table>
</body>
</html>
Use </td> instead of <td> for the closing tags of boxes 6 and 7. The colspan for box 2 is not necessary. The other three colspans were too large. This code should get you to Figure 2.
<table width="30%">
<tr>
<td colspan="3">1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td rowspan="2" colspan="3">4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td colspan="2">6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</table>
This would make the first figure:
<table width="30%">
<tr>
<td>1</td>
<td>2</td>
<td rowspan="2">3</td>
</tr>
<tr>
<td>4</td>
<td rowspan="4">5</td>
</tr>
<tr>
</tr>
<tr>
<td rowspan="3">6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td rowspan="2">10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
</tr>
</table>
There were some errors in your html related to closing </td> tags. This should work:
<html>
<head>
<style>
table,
td,
th {
border: 2px solid gray;
text-align: center
}
</style>
</head>
<body>
<table width="30%">
<tr>
<td colspan="5">1</td>
<td colspan="3">2</td>
</tr>
<tr>
<td>3</td>
<td rowspan="2" colspan="6">4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td colspan="4">6</td>
<td colspan="2">7</td>
<td colspan="2">8</td>
</tr>
<tr>
<td colspan="2">9</td>
<td colspan="2">10</td>
<td colspan="2">11</td>
<td colspan="2">12</td>
</tr>
</table>
</body>
</html>
Demo: https://jsfiddle.net/js2ye3uo/
In the following code, my 1st table rows are not stretching to full which is frustrating. While 2nd table is fine and stretches as expected. Can someone cite me the reason and help fix it?
body {padding: 20px;}
table {border:1px solid gray;}
.orange {background:#ffa566!important;}
.aqua {background: #aaffff!important;}
table {display:inline-block;float:left;}
tbody, thead {width:100%;}
<html>
<head>
<link rel="stylesheet" src="<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" />
</head>
<body>
<h1>Lok Sabha</h1>
<h3>2019</h1>
<table class="table table-striped" style="width:500px">
<thead>
<tr><th>#</th><th>Party</th><th>Seats</th></tr>
</thead>
<tbody>
<tr class="orange"><td>1</td><td>BJP</td><td>303</td></tr>
<tr class="orange"><td>2</td><td>Shiv-Sena</td><td>18</td></tr>
<tr class="orange"><td>3</td><td>JD(U)</td><td>14</td></tr>
<tr class="orange"><td>4</td><td>LJP</td><td>6</td></tr>
<tr><td>5</td><td>Akali-Dal</td><td>2</td></tr>
<tr><td>6</td><td>Apna-Dal</td><td>2</td></tr>
<tr><td>7</td><td>Jharkhand Student Union</td><td>2</td></tr>
<tr><td>8</td><td>AIDMK</td><td>1</td></tr>
<tr><td>9</td><td>Loktantrik-Party (Hanuman Beniwal)</td><td>1</td></tr>
<tr><td>10</td><td>Democratic-Progressive-Party (Nagaland)</td><td>1</td></tr>
<tr><td>11</td><td>People-Party (Meghalay-Manipur)</td><td>1</td></tr>
</tbody>
</table>
<table class="table table-striped" style="width:500px">
<tr><th>#</th><th>Party</th><th>Seats</th></tr>
<tr class="aqua"><td>1</td><td>Congress</td><td>52</td></tr>
<tr class="aqua"><td>2</td><td>DMK (Karunanidhi)</td><td>23</td></tr>
<tr class="aqua"><td>3</td><td>NCP (Sharad-Pawar)</td><td>5</td></tr>
<tr><td>4</td><td>National-Conference (farooq-abdulla)</td><td>3</td></tr>
<tr><td>5</td><td>Indian Union Muslim League - Kerela</td><td>3</td></tr>
<tr><td>6</td><td>Janata-Dal(Secular) - Dewegowda/Karnataka</td><td>1</td></tr>
<tr><td>7</td><td>Jharkhand Mukti Morcha</td><td>1</td></tr>
<tr><td>8</td><td>Revolutionary Socialist Party - left-winged/ socialist/ W.Bengal</td><td>1</td></tr>
<tr><td>9</td><td>Kerela-Congress[M] - Chrisitan/Kerela/5mla-seats</td><td>1</td></tr>
<tr><td>10</td><td>VCK (Tamil Panther Party) -Supports LTTE/dalit-tamil-support/tamil-nationalism</td><td>1</td></tr>
</table>
</body>
</html>
Remove display: inline-block; in table should solve the issue.
body {
padding: 20px;
}
table {
border: 1px solid gray;
}
.orange {
background: #ffa566 !important;
}
.aqua {
background: #aaffff !important;
}
table {
float: left;
}
tbody,
thead {
width: 100%;
}
<h1>Lok Sabha</h1>
<h3>2019</h1>
<table class="table table-striped" style="width:500px">
<thead>
<tr>
<th>#</th>
<th>Party</th>
<th>Seats</th>
</tr>
</thead>
<tbody>
<tr class="orange">
<td>1</td>
<td>BJP</td>
<td>303</td>
</tr>
<tr class="orange">
<td>2</td>
<td>Shiv-Sena</td>
<td>18</td>
</tr>
<tr class="orange">
<td>3</td>
<td>JD(U)</td>
<td>14</td>
</tr>
<tr class="orange">
<td>4</td>
<td>LJP</td>
<td>6</td>
</tr>
<tr>
<td>5</td>
<td>Akali-Dal</td>
<td>2</td>
</tr>
<tr>
<td>6</td>
<td>Apna-Dal</td>
<td>2</td>
</tr>
<tr>
<td>7</td>
<td>Jharkhand Student Union</td>
<td>2</td>
</tr>
<tr>
<td>8</td>
<td>AIDMK</td>
<td>1</td>
</tr>
<tr>
<td>9</td>
<td>Loktantrik-Party (Hanuman Beniwal)</td>
<td>1</td>
</tr>
<tr>
<td>10</td>
<td>Democratic-Progressive-Party (Nagaland)</td>
<td>1</td>
</tr>
<tr>
<td>11</td>
<td>People-Party (Meghalay-Manipur)</td>
<td>1</td>
</tr>
</tbody>
</table>
<table class="table table-striped" style="width:500px">
<tr>
<th>#</th>
<th>Party</th>
<th>Seats</th>
</tr>
<tr class="aqua">
<td>1</td>
<td>Congress</td>
<td>52</td>
</tr>
<tr class="aqua">
<td>2</td>
<td>DMK (Karunanidhi)</td>
<td>23</td>
</tr>
<tr class="aqua">
<td>3</td>
<td>NCP (Sharad-Pawar)</td>
<td>5</td>
</tr>
<tr>
<td>4</td>
<td>National-Conference (farooq-abdulla)</td>
<td>3</td>
</tr>
<tr>
<td>5</td>
<td>Indian Union Muslim League - Kerela</td>
<td>3</td>
</tr>
<tr>
<td>6</td>
<td>Janata-Dal(Secular) - Dewegowda/Karnataka</td>
<td>1</td>
</tr>
<tr>
<td>7</td>
<td>Jharkhand Mukti Morcha</td>
<td>1</td>
</tr>
<tr>
<td>8</td>
<td>Revolutionary Socialist Party - left-winged/ socialist/ W.Bengal</td>
<td>1</td>
</tr>
<tr>
<td>9</td>
<td>Kerela-Congress[M] - Chrisitan/Kerela/5mla-seats</td>
<td>1</td>
</tr>
<tr>
<td>10</td>
<td>VCK (Tamil Panther Party) -Supports LTTE/dalit-tamil-support/tamil-nationalism</td>
<td>1</td>
</tr>
</table>
How to vertically center "There is information text" here?
Better - without changing html.
Also why doesn't max-width: 15px!important limit the width of the first <td> (tall) to 15px? How to limit it without changing the general width parameter?
td {width: 60px}
<table border="1">
<tbody>
<tr>
<td style="max-width: 15px!important;" rowspan="12">
<p style="transform: rotate(270deg); white-space: nowrap">There is information text</p>
</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td>6</td>
</tr>
<tr>
<td>7</td>
</tr>
<tr>
<td>8</td>
</tr>
<tr>
<td>9</td>
</tr>
<tr>
<td>10</td>
</tr>
<tr>
<td>11</td>
</tr>
<tr>
<td>12</td>
</tr>
</tbody>
</table>
It is need to center it so without rotation to make it work with:
Is it possible? It is the most interesting for me.
Don't use rotation but adjust the writing-mode. The text will get centred and you no more need to force the width:
td:not([rowspan]) {
width: 60px
}
p {
margin:5px;
writing-mode: vertical-lr;
transform: scale(-1);
}
<table border="1">
<tbody>
<tr>
<td rowspan="12">
<p>There is information text</p>
</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td>6</td>
</tr>
<tr>
<td>7</td>
</tr>
<tr>
<td>8</td>
</tr>
<tr>
<td>9</td>
</tr>
<tr>
<td>10</td>
</tr>
<tr>
<td>11</td>
</tr>
<tr>
<td>12</td>
</tr>
</tbody>
</table>
Or like below:
td:not([rowspan]) {
width: 60px
}
p {
margin:5px;
white-space:nowrap;
max-width:15px;
display:flex;
justify-content:center;
transform:rotate(-90deg);
}
<table border="1">
<tbody>
<tr>
<td rowspan="12">
<p>There is information text</p>
</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td>6</td>
</tr>
<tr>
<td>7</td>
</tr>
<tr>
<td>8</td>
</tr>
<tr>
<td>9</td>
</tr>
<tr>
<td>10</td>
</tr>
<tr>
<td>11</td>
</tr>
<tr>
<td>12</td>
</tr>
</tbody>
</table>
Since you are using transform: rotate(270) to rotate your text, the vertical-align: middle doesn't work anymore for the content of your <td>.
What you can use is add translateX(...) to adjust your text's placement. This won't work for dynamic content though.
I think this may solve your question with the use of rotation
td { width:60px}
p{
margin: 0;
position: absolute;
top: 50%;
-moz-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
-webkit-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
transform: translateX(-50%) translateY(-50%) rotate(270deg);
left: 50%;
}
<table border="1">
<tbody>
<tr>
<td style="max-width: 15px!important;position:relative;" rowspan="12">
<p style="white-space: nowrap">There is information text</p>
</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td>6</td>
</tr>
<tr>
<td>7</td>
</tr>
<tr>
<td>8</td>
</tr>
<tr>
<td>9</td>
</tr>
<tr>
<td>10</td>
</tr>
<tr>
<td>11</td>
</tr>
<tr>
<td>12</td>
</tr>
</tbody>
</table>
I am trying to create this type of table or design in HTML/CSS/PHP.
In each block, there will be 3 variables. One with horizontal orientation in center and two with vertical orientation in either direction of a center variable.
I have tried to replicate this by using HTML tables but not getting proper results. This is what I have managed to get.
I already did the programming to configure variables and putting them where they should be with orientation but kind of stuck at proper UI. Kindly help me to design this.
Adding in HTML :
<table style="width:400px">
<tr>
<td>
<table>
<tr>
<td>1</td>
<td> </td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>45</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td> </td>
<td>3</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>1</td>
<td> </td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>45</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td> </td>
<td>3</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>1</td>
<td> </td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>45</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td> </td>
<td>3</td>
</tr>
</table>
</td>
</tr>
</table>
Adding in css:
th, td {
padding: 15px;
}
Solve It :)
Good luck !!!
My Code is......
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
Row two doesn't show. How can I do it?
<table border="1">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td >  </td>
<td > </td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
Have you tried adding <td> </td> ?