I have trying to make scrollable tbody in flexbox.
I got two flexbox and each flexbox has table in it.
When items in table are overflow I want to use vertical scrollbar in tbody.
But tables are in flexbox that has no fixed height.
What should I do to show vertical scrollbar in tbody?
.root {
background-color:green;
width: 200px;
height: 200px;
display: flex;
flex-flow:column nowrap;
}
.container1 {
display: flex;
flex-grow:4;
background-color:yellow;
}
.container1 tbody {
overflow: auto;
}
.container2 {
display: flex;
flex-grow:3;
background-color:blue;
}
<div class="root">
<div class="container1">
<table>
<thead>
<tr>
<td>name</td>
<td>age</td>
</tr>
</thead>
<tbody>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
<div class="container2">
<table>
<thead>
<tr>
<td>name</td>
<td>age</td>
</tr>
</thead>
<tbody>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
</div>
Let me know if you need more info. thanks.
you should use overflow auto
css
.container1 {
display: flex;
flex-grow:4;
background-color:yellow;
overflow:auto;
}
I have made some changes please check !
.root {
background-color:green;
width: 60vw;
height: 30vh;
display: flex;
flex-flow:column nowrap;
}
.container1 {
display: flex;
flex-grow:4;
background-color:yellow;
overflow-y: auto;
}
/* this flexbox is not appears!! */
.container2 {
display: flex;
flex-grow:3;
background-color:blue;
}
<div class="root">
<div class="container1">
<table width="100%">
<thead>
<tr>
<td>name</td>
<td>age</td>
</tr>
</thead>
<tbody>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
<div class="container2">
</div>
</div>
Related
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'm trying to center table vertically and horizontally via flexbox.
One "screen" - one table in the middle, scrolling, - yet another table in the middle.
But via this code doesn't work:
* {
margin : 0;
padding : 0;
}
table {
text-align : center;
}
thead {
font-weight : bold;
background : forestgreen;
}
tfoot {
font-weight : bold;
background : tomato;
}
th, td {
width : 5vw;
}
body {
min-height : 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.wrapper {
min-height : 100vh;
}
<body>
<div class="wrapper">
<table>
<thead>
<tj>
<th>1</th>
<th>1</th>
<th>1</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
</tfoot>
</table>
</div><!-- wrapper end -->
<div class="wrapper">
<table>
<thead>
<tj>
<th>1</th>
<th>1</th>
<th>1</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
</tfoot>
</table>
<div><!-- wrapper end -->
</body>
Where I'm wrong?
If to have the table's each centered per full screen/viewport, to scroll between the 2 tables, check sample 1 below, where I moved all properties from the body rule to the .wrapper rule.
If you intended to have the 2 table's on top of each other, check sample 2 below, which have flex-direction: column set.
To center the table's side-by-side, remove min-height: 100vh from the wrapper rule, sample 3.
Sample 1 - one per full screen/viewport
* {
margin : 0;
padding : 0;
}
table {
text-align : center;
}
thead {
font-weight : bold;
background : forestgreen;
}
tfoot {
font-weight : bold;
background : tomato;
}
th, td {
width : 5vw;
}
.wrapper {
min-height : 100vh;
display: flex;
align-items: center;
justify-content: center;
}
<div class="wrapper">
<table>
<thead>
<tr>
<th>1</th>
<th>1</th>
<th>1</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
</tfoot>
</table>
</div><!-- wrapper end -->
<div class="wrapper">
<table>
<thead>
<tr>
<th>1</th>
<th>1</th>
<th>1</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
</tfoot>
</table>
<div><!-- wrapper end -->
Sample 2 - on top of each other
* {
margin : 0;
padding : 0;
}
table {
text-align : center;
}
thead {
font-weight : bold;
background : forestgreen;
}
tfoot {
font-weight : bold;
background : tomato;
}
th, td {
width : 5vw;
}
body {
min-height : 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
<div class="wrapper">
<table>
<thead>
<tr>
<th>1</th>
<th>1</th>
<th>1</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
</tfoot>
</table>
</div><!-- wrapper end -->
<div class="wrapper">
<table>
<thead>
<tr>
<th>1</th>
<th>1</th>
<th>1</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
</tfoot>
</table>
<div><!-- wrapper end -->
Sample 3 - side-by-side
* {
margin : 0;
padding : 0;
}
table {
text-align : center;
}
thead {
font-weight : bold;
background : forestgreen;
}
tfoot {
font-weight : bold;
background : tomato;
}
th, td {
width : 5vw;
}
body {
min-height : 100vh;
display: flex;
align-items: center;
justify-content: center;
}
<div class="wrapper">
<table>
<thead>
<tj>
<th>1</th>
<th>1</th>
<th>1</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
</tfoot>
</table>
</div><!-- wrapper end -->
<div class="wrapper">
<table>
<thead>
<tj>
<th>1</th>
<th>1</th>
<th>1</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
</tfoot>
</table>
<div><!-- wrapper end -->
You can also use place-content: center with display: grid to achieve this.
What's place-content ?
From css-tricks.com
The place-content property in CSS is shorthand for the align-content
and justify-content properties, combining them into a single
declaration in CSS Grid and Flexbox layouts, where align-content and
justify-content are values that align an individual item in the block
and inline directions.
body{
margin:0;
text-align:center;
}
.wrapper {
min-height:100vh;
display:grid;
place-content:center;
}
th, td {
width: 30px;
}
<body>
<div class="wrapper">
<table>
<thead style="background:forestgreen">
<tj>
<th>1</th>
<th>1</th>
<th>1</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</tbody>
<tfoot style="background:tomato">
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
</tfoot>
</table>
</div>
</body>
Im having trouble with getting table to look like I need.
I need table like this
But what i keep gettng is that ether the text of sundmused ja hadaabi are overlapping or thevahetused cell gets too wide so the alignment of thext gets weird. Can someone help me to create a table like this.
If you have too small table, you can use text-overflow: ellipsis; to add ... when there is not enough space for text.
table {
border: 1px solid black;
table-layout: fixed;
width: 30%;
border-collapse: collapse;
text-align: center;
margin-bottom: 10px;
}
table:nth-child(2) {
width: 100%;
}
table:nth-child(3) {
width: 50%;
}
table td {
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid black;
}
.important {
background-color: yellow;
}
<table>
<tr>
<td colspan="3">vahetused</td>
<td>sundmused</td>
<td>hadaabid</td>
</tr>
<tr>
<td class="important" colspan="3">01.01.2017.00:00-02.01.2017.00:00</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Kokku</td>
<td>1</td>
<td></td>
<td>1</td>
<td>1</td>
</tr>
</table>
<table>
<tr>
<td colspan="3">vahetused</td>
<td>sundmused</td>
<td>hadaabid</td>
</tr>
<tr>
<td class="important" colspan="3">01.01.2017.00:00-02.01.2017.00:00</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Kokku</td>
<td>1</td>
<td></td>
<td>1</td>
<td>1</td>
</tr>
</table>
<table>
<tr>
<td colspan="3">vahetused</td>
<td>sundmused</td>
<td>hadaabid</td>
</tr>
<tr>
<td class="important" colspan="3">01.01.2017.00:00-02.01.2017.00:00</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Kokku</td>
<td>1</td>
<td></td>
<td>1</td>
<td>1</td>
</tr>
</table>
This looks suspiciously like an assignment! But anyway:
I suspect your problem is that the first two cells 'span' three columns in the bottom row, and they don't do this automatically. Adding colspan="3" to the cells gives the result as below, which is guess is what you need.
td {
text-align: center;
}
<table border="1">
<tr>
<td colspan="3">vahetused</td>
<td>sundmused</td>
<td>hadaabid</td>
</tr>
<tr>
<td colspan="3">01.01.2017.00:00 - 02.01.2017 00:00</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Kokku</td>
<td>1</td>
<td></td>
<td>1</td>
<td>1</td>
</tr>
</table>
Add your style to this code (padding, margin and color)
<table border style='text-align: center;border-collapse: collapse'>
<tr>
<td COLSPAN=3>vahetused</td>
<td>sundmused</td>
<td>hadaabid</td>
</tr>
<tr>
<td COLSPAN=3>01.01.2017.00:00 - 02.01.2017.00:00</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Kokku</td>
<td>1</td>
<td> </td>
<td>1</td>
<td>1</td>
</tr>
</table>
How can I make the table header appear on the left side of the table as a column instead on the top as a row? I have this markup:
<table>
<thead>
<tr>
<th>a</th>
<th>b</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>
Just use <th> as the first element in the row. Then add the scope attribute, which has no visual impact, but you could use it e.g. in CSS.
<table>
<tbody>
<tr>
<th scope="row">A</th>
<td>b</td>
</tr>
<tr>
<th scope="row">C</th>
<td>d</td>
</tr>
</tbody>
</table>
See also http://www.w3.org/TR/WCAG20-TECHS/H63
How's this?
Example
CSS
thead {
float: left;
}
thead th {
display: block;
}
tbody {
float: right;
}
jsFiddle.
Update
Well, the 1, 2 should also be as column, obviously.
jsFiddle.
It also looks like IE baulks at this. You may have to trade semantic-ness for cross browser compatibility.
You can see the result here. You mean like this?
<table border="1">
<thead>
<tr>
<th></th>
<th colspan="2">Letters</th>
</tr>
<tr>
<th></th>
<th>a</th>
<th>b</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">Numbers</td>
<td>1</td>
<td>4</td>
</tr>
<tr>
<td>2</td>
<td>5</td>
</tr>
<tr>
<td>3</td>
<td>6</td>
</tr>
</tbody>
</table>
You usually use rowspan and colspan for cells spanning multiple columns/rows.
I needed something a little different, but the answers by #alex and #marion got me started in the right direction. The problem was that when you needed many items in the table, the "columns" started stacking funny on smaller screens.
Thanks to Serge for his answer here that led me in this solution. This solution allows for scrolling horizontally and doesn't stack funny regardless of the size of the screen/window. I tested it in Chrome, Firefox, Opera, Edge, and IE11. Here's the fiddle with the correct alignment for the new "rows" and "columns": https://jsfiddle.net/berrym/6r3zvaef/21/
And just in case it disappears from JSFiddle:
<style>
table{
display:block;
white-space:nowrap;
width:100%;
}
td, th {
border-bottom: 1px solid red;
border-collapse: collapse;
}
thead {
float: left;
background: yellow;
width: 10%;
}
thead tr {
width:100%;
float:left;
}
thead th {
display: block;
}
tbody {
float: left;
width: 90%;
}
tbody tr {
display: inline-block;
}
tbody td {
float:left;
width:100%;
}
</style>
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
</tbody>
</table>
This worked perfectly for me : (inspired from the first answer)
Example here
html :
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
</tbody>
</table>
css :
table, td, th {
border: 1px solid red;
}
thead {
float: left;
}
thead th {
display: block;
background: yellow;
}
tbody {
float: left;
}
tbody tr {
display: block;
float: left;
}
tbody td {
display: block;
}
If you use bootstrap, you can achieve this easily with the table-reflow style: http://v4-alpha.getbootstrap.com/content/tables/#reflow