I have some problems with wrong calculating of cell's position and width.
Summary, problem:
Width of left column is increasing too fast(while inside text is writing), so that steal the space of right column, really important spase.
My code:
table {
width: 100%;
}
td {
border: 1px solid black;
}
<table>
<tr>
<td>This</td>
<td>1</td>
</tr>
</table>
<table>
<tr>
<td>This text</td>
<td>1</td>
</tr>
</table>
<table>
<tr>
<td>This text escapes</td>
<td>1</td>
</tr>
</table>
<table>
<tr>
<td>This text escapes too</td>
<td>1</td>
</tr>
</table>
<table>
<tr>
<td>This text escapes too much</td>
<td>1</td>
</tr>
</table>
<table>
<tr>
<td>This text escapes too much space</td>
<td>1</td>
</tr>
</table>
table {
width: 100%;
}
td:first-child {
border: 1px solid black;
white-space: nowrap;
}
td:last-child {
border: 1px solid black;
width: 100%;
}
<table>
<tr>
<td>This</td>
<td>1</td>
</tr>
</table>
<table>
<tr>
<td>This text</td>
<td>1</td>
</tr>
</table>
<table>
<tr>
<td>This text escapes</td>
<td>1</td>
</tr>
</table>
<table>
<tr>
<td>This text escapes too</td>
<td>1</td>
</tr>
</table>
<table>
<tr>
<td>This text escapes too much</td>
<td>1</td>
</tr>
</table>
<table>
<tr>
<td>This text escapes too much space</td>
<td>1</td>
</tr>
</table>
Is this what you are looking for?
table {
width: 100%;
}
td {
border: 1px solid black;
white-space: nowrap;
}
td:nth-child(2){
width: 100%;
}
<table>
<tr>
<td>This</td>
<td>1</td>
</tr>
</table>
<table>
<tr>
<td>This text</td>
<td>1</td>
</tr>
</table>
<table>
<tr>
<td>This text escapes</td>
<td>1</td>
</tr>
</table>
<table>
<tr>
<td>This text escapes too</td>
<td>1</td>
</tr>
</table>
<table>
<tr>
<td>This text escapes too much</td>
<td>1</td>
</tr>
</table>
<table>
<tr>
<td>This text escapes too much space</td>
<td>1</td>
</tr>
</table>
Related
I am wondering if this table layout in HTML possible? here is what I have in Reactjs:
I am getting errors trying to do a colspan.
What I want to achieve is this layout:
Many thanks in advance and greatly appreciate any helps
yes it is possible with colspan, here is the example code
<table>
<tr>
<th>name</th>
<th>title</th>
<th>edit</th>
</tr>
<tr>
<td>Jhon doe</td>
<td>Sales</td>
<td>Edit</td>
</tr>
<tr>
<td colspan="3">Remark : blablabla</td>
</tr>
<tr>
<td>Jane doe</td>
<td>Sales</td>
<td>Edit</td>
</tr>
<tr>
<td colspan="3">Remark : blablabla</td>
</tr>
</table>
but you will need css to add borders
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
That's how you wanted your table to be, use colspan after which cell you need divided columns.
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
table {
border: 1px solid black;
width: 60%;
text-align: left;
}
th,
td {
padding: 10px;
}
<table>
<thead>
<tr>
<th>Name</th>
<th>Name</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td colspan="3">Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td colspan="3">Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td colspan="3">Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
</tbody>
</table>
Yes, it is.
You can read this link.
But to save your time you just need to set colspan=3 in your td where you want it to be expanded.
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>
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>
I want to create a table using rowspan and colspan and it is almost done. only the issue is in last tr. I don't know why but it is not picking the rowspan in last tr.
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
<table style="width:50%">
<tr>
<td height="75px">1</td>
<td colspan="4" height="75px">2</td>
</tr>
<tr>
<td rowspan="3" colspan="2">a</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td></td>
<td></td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
As you can see in result I want to merge the last blank td with a.
This is the result I want:
You should put the first set of cells with 3, 4, 5 after the td with the row+colspan.
And omit the empty cells from the last row.
Result:
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 5px;
text-align: left;
}
<table style="width:50%">
<tr>
<td width="20%" height="75px">1</td>
<td colspan="4" height="75px">2</td>
</tr>
<tr>
<td rowspan="3" colspan="2">a</td>
<td width="20%">3</td>
<td width="20%">4</td>
<td width="20%">5</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
Note that the second column never has content of its own, it is always part of a colspan set. That would normally make the second column collapse on most if not all browsers, and that is why the cell width is being set.
This is simply an error in counting. rowspan="3" means it spans three rows.
First row
<tr>
<td rowspan="3" colspan="2">a</td>
</tr>
Second row
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
Third row
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
Fourth row … so it doesn't span it.
<tr>
<td></td>
<td></td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
(You should omit the empty cells from the final row too).
try this:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
<table style="width:50%">
<tr>
<td height="75px">1</td>
<td colspan="4" height="75px">2</td>
</tr>
<tr>
<td rowspan="3" colspan="2">a</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<tr style="visibility:hidden">
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</tr>
</table>
In order to keep the overlapping of the cells as you stated, you need to use an "invisible" row for reference. I'm not aware of any other way to achieve this, as colspan and rowspan need actual cells as a reference.
Here's an updated version of your example that works that way. Had to change the CSS a bit as well to prevent double borders around the hidden cells.
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
.reference,
.reference td {
padding: 0px 5px;
height: 0px;
line-height: 0px;
border: 0 none;
}
<table style="width:50%">
<tr>
<td height="75px">1</td>
<td colspan="4" height="75px">2</td>
</tr>
<tr>
<td rowspan="4" colspan="2">a</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr class="reference">
<td></td>
<td></td>
<td></td>
<td></td>
<td></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