Centering rotated text in <td> - html

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>

Related

placement of scrollbar in html table

trying to put scrollbar to my table i put it but its very far away from table. how can i put it near the table
.html
<h1> ASSET TABLE </h1>
<div class="table">
<div class = "overflow-auto">
{% render_table table_assets %}
</div>
</div>
<h1>TASK TABLE </h1>
<div class="table">
{% render_table table_tasks %}
</div>
.css
.overflow-auto {
height: 150px;
overflow-y: scroll;
overflow: auto;
}
it seems like that

You have to set a width for the parent div.
A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).
Block-level elements
#container {
overflow-y: scroll;
max-width: 500px;
max-height: 200px;
}
table {
width: 100%;
}
<div id='container'>
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tbody>
</table>
</div>

Nested table css broken

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>

how to create an html table with specific rows and columns

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/

Table rows is not stretching full-length in 1st Table, in 2nd it does fine

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 do I create an HTML table with the following structure?

I'm trying to create a table with the following structure.
I've been reading various sites and blogs to try to create this myself, but I have failed, terribly, and decided to ask for help here.
So far, I've been able to create the outer structure:
<table border='1' style="width:100%">
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
<tr>
<td>Bak</td>
<tr></tr>
<td>Baz</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
<tr>
<td>Bak</td>
<td>Baz</td>
</tr>
</table>
But I can't figure out how to add the fields for Name, Number, and Cost. How do I nest it?

Use rowspan to cause a cell to appear in multiple rows, headers to link your data cells with header cells that aren't in traditional positions, and tbody to describe subdivisions of a table.
table, td, th {
border-collapse: collapse;
border: solid black 1px;
padding: 3px;
}
<table>
<tbody>
<tr>
<td rowspan="3"> ...
<th id="name_1"> Name
<td headers="name_1"> ...
<tr>
<th id="number_1"> Number
<td headers="number_1"> ...
<tr>
<th id="cost_1"> Cost
<td headers="cost_1"> ...
<tbody>
<tr>
<td rowspan="3"> ...
<th id="name_2"> Name
<td headers="name_2"> ...
<tr>
<th id="number_2"> Number
<td headers="number_2"> ...
<tr>
<th id="cost_2"> Cost
<td headers="cost_2"> ...
</table>

You need to use rowspan JSFIDDLE
<table border="1">
<tr>
<td rowspan="3"></td>
<td>Name</td>
<td>&nbsp</td>
</tr>
<tr>
<td>Number</td>
<td> </td>
</tr>
<tr>
<td>cost</td>
<td> </td>
</tr>
<tr>
<td rowspan="3"></td>
<td>Name</td>
<td>&nbsp</td>
</tr>
<tr>
<td>Number</td>
<td> </td>
</tr>
<tr>
<td>cost</td>
<td> </td>
</tr>
</table>

try fiddle fiddle
<table border='1' style="width:100%">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td rowspan="3">some</td>
<td>Name</td>
<td>11</td>
</tr>
<tr>
<td>No</td>
<td>22</td>
</tr>
<tr>
<td>Cost</td>
<td>22</td>
</tr>
</table>

User rowspan
<table border="1">
<tr>
<td rowspan="3">Data Section 1</td>
<td>Some Data 1.1</td>
</tr>
<tr>
<td>Some Data 1.2</td>
</tr>
<tr>
<td>Some Data 1.3</td>
</tr>
<tr>
<td rowspan="3">Data Section 2</td>
<td>Some Data 2.1</td>
</tr>
<tr>
<td>Some Data 2.2</td>
</tr>
<tr>
<td>Some Data 2.3</td>
</tr>
</table>

<table border='1' style="width: 100%">
<tr>
<td rowspan="3">1</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td rowspan="3">1</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td rowspan="3">1</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
</table>

In general way like this
<table border="1">
<tr>
<td rowspan="3">1</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td rowspan="3">2</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td rowspan="3">3</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
</tr>
<tr>
<td>17</td>
<td>18</td>
</tr>
</table>
http://jsfiddle.net/s5b0c5d9/