Develop Reference

How can I make a "Table" where rows wrap horizontally in HTML5 /css3?

I have the following table using html table, tr, td tags.
This is all great, but I am using angular, and the problem is if I have more rows, I don't have the space for it vertically. Instead I want to "overflow" to the right of it so that it looks like:
What is the best way using HTML5/CSS so that I can make it such that content spills over if it exceeds the table? Note that in some cases I may have 2 or 3 entries, so I am hoping I don't have to make the width double the size of normal at the start, and instead have the table be sized based on the number of entries I have in the table. No scrollbars.
I feel like the table tag in HTML is limiting and may not allow me to do this. What is the best way to do this? Using divs?
<table style="background:green;">
<tr><td>Name</td><td>Sport</td><td>Score</td></tr>
<tr><td>Jordan</td><td>Soccer</td><td>50</td></tr>
<tr><td>Jordan</td><td>Soccer</td><td>50</td></tr>
<tr><td>Jordan</td><td>Soccer</td><td>50</td></tr>
</table>
Attempting a flexbox approach, though it seems that if I put the flexbox in a div, then the background doesn't appear to fill properly once the entries go beyond the first column:
https://jsfiddle.net/t0h7w2hw/

Please follow below code example
This will wrap rows in a list style in mobile.
You need to data-label attribute with each content td so that it knows which column it is. In mobile you can show lable before td by using css content:"" property.
body {
font-family: "Arial", sans-serif;
line-height: 1.25;
}
table {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
table-layout: fixed;
}
table caption {
font-size: 1.5em;
margin: .5em 0 .75em;
}
table tr {
background: #f8f8f8;
border: 1px solid #ddd;
padding: .35em;
}
table th,
table td {
padding: .625em;
text-align: center;
}
table th {
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
}
#media screen and (max-width: 600px) {
table {
border: 0;
}
table caption {
font-size: 1.3em;
}
table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: .625em;
}
table td {
border-bottom: 1px solid #ddd;
display: block;
font-size: .8em;
text-align: right;
}
table td:before {
/*
* aria-label has no advantage, it won't be read inside a table
content: attr(aria-label);
*/
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table td:last-child {
border-bottom: 0;
}
}
<table>
<caption>Statement Summary</caption>
<thead>
<tr>
<th scope="col">Card</th>
<th scope="col">Due Date</th>
<th scope="col">Amount</th>
<th scope="col">Period</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Card">Visa - 3412</td>
<td data-label="Due Date">04/01/2016</td>
<td data-label="Amount">$1,190</td>
<td data-label="Period">03/01/2016 - 03/31/2016</td>
</tr>
<tr>
<td scope="row" data-label="Card">Visa - 6076</td>
<td data-label="Due Date">03/01/2016</td>
<td data-label="Amount">$2,443</td>
<td data-label="Period">02/01/2016 - 02/29/2016</td>
</tr>
<tr>
<td scope="row" data-label="Card">Corporate AMEX</td>
<td data-label="Due Date">03/01/2016</td>
<td data-label="Amount">$1,181</td>
<td data-label="Period">02/01/2016 - 02/29/2016</td>
</tr>
<tr>
<td scope="row" data-label="Card">Visa - 3412</td>
<td data-label="Due Date">02/01/2016</td>
<td data-label="Amount">$842</td>
<td data-label="Period">01/01/2016 - 01/31/2016</td>
</tr>
</tbody>
</table>

Actually there is no such facility is defined for HTML table element by using CSS. I have tries some by giving various positions for table and containing div, not worked. As in the fiddle example you have provided, you must use HTML div element for that.

//HTML
<div ng-app>
<div class=" header-row">
<div class="col">Name</div>
<div class="col">Sports</div>
<div class="col">Score</div>
</div>
<div ng-controller="TodoCtrl">
<div class="row" ng-repeat="rows in chunkedData">
<div class="span4" ng-repeat="item in rows">
<span class="col">{{item.name}}</span>
<span class="col">{{item.sport}}</span>
<span class="col">{{item.score}}</span>
</div>
</div>
</div>
</div>
//Script
function TodoCtrl($scope) {
$scope.data = [
{
name : '0',
sport: 'Cricket',
score: 89
},
{
name : '1',
sport: 'Cricket',
score: 89
},
{
name : '2',
sport: 'Cricket',
score: 89
},
{
name : '3',
sport: 'Cricket',
score: 89
},
{
name : '4',
sport: 'Cricket',
score: 89
},
{
name : '5',
sport: 'Cricket',
score: 89
},
{
name : '6',
sport: 'Cricket',
score: 89
}
];
$scope.chunkedData = chunk($scope.data, 3);
function chunk(arr, size) {
var newArr = [];
for (var i=0; i<arr.length; i+=size) {
newArr.push(arr.slice(i, i+size));
}
return newArr;
}
}
//CSS
.col{
display: inline-block;
width:70px;
float: left;
padding: 3px;
}
.header-row{
width: 100%;
background-color: #000;
color: #fff;
overflow: hidden;
padding: 3px;
}
.row{
overflow: hidden;
display: inline-block;
float: left;
border: 1px solid grey;
}
JsFiddle Link http://jsfiddle.net/U3pVM/32296/
You simply need to create a chunk of records for first column which you can do in the controller itself and then with the help of ng-repeat you can render it

This is all great, but I am using angular, and the problem is if I
have more rows, I don't have the space for it vertically.
What has angular got to do with any of this?
[..] if I have more rows, I don't have the space for it vertically.
Instead I want to "overflow" to the right of it
Tables won't give you that kind of flexibility especially, you won't be able to control height and flow of the rows as columns.
[..] so that I can make it such that content spills over if it exceeds the
table? Note that in some cases I may have 2 or 3 entries, so I am
hoping I don't have to make the width double the size of normal at the
start, and instead have the table be sized based on the number of
entries I have in the table.
One simple and quick way could be to split your rows into tables of their own. If you can have that structure, then it is simply a matter of using CSS columns.
Typically, you would wrap all these tables in a div which will have its height constraints. Set column-* properties on the wrapping div and there you go. You may play around with column-gap, column-rule, column-span, and column-fill properties to beautify the whole thingy.
Also note that you will need to use break-inside: avoid on the tables to avoid them breaking half-way while flowing to the next column.
Example Snippet:
#rowflow {
height: 120px; max-height: 120px;
border: 1px solid #d33; overflow: hidden;
column-width: 200px; column-gap-width: 0px; column-fill: auto;
column-rule: 1px solid #bbb;
}
table {
font-family: sans-serif; margin-bottom: 2px;
table-layout: fixed; width: 190px;
}
table:first-child { column-span: all; }
table, th, td { border-collapse: collapse; border: 0px solid gray; padding: 6px; }
table, tr { break-inside: avoid; }
th, td { text-align: left; }
th:last-child, td:last-child { text-align: right; }
<div id="rowflow">
<table><tr><th>Name</th><th>Sport</th><th>Score</th></tr></table>
<table><tr><td>Jordan</td><td>Soccer</td><td>50</td></tr></table>
<table><tr><td>Jordan</td><td>Soccer</td><td>50</td></tr></table>
<table><tr><td>Jordan</td><td>Soccer</td><td>50</td></tr></table>
<table><tr><td>Jordan</td><td>Soccer</td><td>50</td></tr></table>
<table><tr><td>Jordan</td><td>Soccer</td><td>50</td></tr></table>
</div>
In the above snippet, the wrapping div is height constrained and you can see the columns flowing.
Use this fiddle to try changing the window size and see the effect.
[..] so I am hoping I don't have to make the width double the size of
normal at the start, and instead have the table be sized based on the
number of entries I have in the table. No scrollbars.
The wrapping div will be full-width on its own. However, you can twiddle with overflow to control how the overflow is handled. Changing width dynamically based on the width of the content is a whole different ball-game altogether where you would need JavaScript and it gets messy.
Note: For the above example to work, you will need to fix the widths of your tables so that the columns align neatly. You may use table-layout: fixed to use a fixed layout.

Using div and column
.columns {
column-count: 2;
column-gap: 10px;
}
.myTable {
display: table;
width: 100%;
height: 200px;
}
.myHeader {
width: 100%;
font-weight: bold;
}
.myCell {
display: table-cell;
width: 33%;
float: left;
}
<div class="columns">
<div class="myTable">
<div class="myHeader">
<div class="myCell">Name</div>
<div class="myCell">Sport</div>
<div class="myCell">Score</div>
</div>
<div class="myCell">Bob</div>
<div class="myCell">Soccer</div>
<div class="myCell">8</div>
<div class="myCell">Jane</div>
<div class="myCell">Softball</div>
<div class="myCell">9</div>
<div class="myCell">Hank</div>
<div class="myCell">Baseball</div>
<div class="myCell">6</div>
<div class="myCell">Lisa</div>
<div class="myCell">Soccer</div>
<div class="myCell">9</div>
<div class="myCell">Bill</div>
<div class="myCell">Football</div>
<div class="myCell">4</div>
</div>
</div>
FIDDLE

Use ::after selector to show line number but also display a <a> element next to it when hovering over the containing table td cell

I'm trying to show line number next to source code in my web page, I'm using two table columns, one for line number, another for source code, and I have the following requirement:
show a special icon before the line number when mouse is hovering
over it
the special icon ('x' in the code below) is a anchor tag, and I'd
like the anchor to expand to the whole td cell
when selecting the source code, do NOT select and copy line
number
If I don't have requirement 3, I can simply show line number in the <a> element and expand it to the full td. I managed to make things sort of work, my code is below:
HTML
<table id='file-table' class='table table-hover table-condensed'>
<tr>
<!--other td-->
<td data-line-number='1'>
<a type='button' role='button' ng-click='doSomething()'>x</a>
</td>
<!--other td-->
</tr>
</table>
CSS
/*the concerning column is the 4th in the table*/
#file-table tr td:nth-child(4) {
width: 4%;
border-right: 1px solid #ddd;
padding: 0px 5px 0px 5px;
}
#file-table tr td:nth-child(4)::after {
content: attr(data-line-number);
padding: 0px 5px 0px 5px;
text-align: right;
display: block;
}
#file-table tr td:nth-child(4) > a {
display: none;
}
#file-table tr td:nth-child(4):hover > a {
width: 100%;
height: 100%;
text-align: left;
display: block;
}
So the idea is use ::after to show line number in <td> and hide <a> until hover over it, when <a> will display and expand to 100% width. However, the problem I have now is even the line number displays ok:
when I hover over it, 'x' shows but breaks td to two lines:
What am I doing wrong here? How can I make sure 'x' is shown on the same line, if that's possible?

I'm not sure you need to worry about a special data attribute as it's possible to achieve the line number using pure CSS and the counter-increment property.
Having the hyperlink appear on hover and (I assume) overtop any other text will require some absolute positioning but can be achieved as follows:
#file-table {
counter-reset: line;
}
#file-table tr:before {
counter-increment: line;
content: counter(line);
display: inline-block;
color: #888;
text-align: center;
padding: 12px 8px;
font-size: 0.5em;
}
#file-table td {
position: relative;
width: 100%;
}
#file-table td a {
display: none;
}
#file-table td:hover a {
position: absolute;
display: block;
width: 100%;
z-index: 2;
top: 0;
background: #eee;
padding: 5px 2px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table id="file-table" class="table table-hover table-condensed">
<tr><td>Line 1<a type='button' role='button' ng-click='doSomething()'>x</a></td></tr>
<tr><td>Line 2<a type='button' role='button' ng-click='doSomething()'>x</a></td></tr>
<tr><td>Line 3<a type='button' role='button' ng-click='doSomething()'>x</a></td></tr>
<tr><td>Line 4<a type='button' role='button' ng-click='doSomething()'>x</a></td></tr>
<tr><td>Line 5<a type='button' role='button' ng-click='doSomething()'>x</a></td></tr>
<tr><td>Line 6<a type='button' role='button' ng-click='doSomething()'>x</a></td></tr>
<tr><td>Line 7<a type='button' role='button' ng-click='doSomething()'>x</a></td></tr>
</table>
Some considerations:
Bootstrap's hover effect on tables is an RGBA value. In order to
achieve the hyperlink covering 100% of the table cell, you have to
implement another background. The two overlap and create a
darker-than-standard color so you may need to fiddle with that.
The table cells will need a defined width or the line numbers in the :before tend to result in some odd placement.

Table Fix Height For All Row

I want table content to align center for horizontal and vertical. I've done for that. But I need help to fix some code. Check out this JSFiddle and example code below: http://jsfiddle.net/yiedpozi/a8ZLJ/
CSS example code:
div.container {
width: 500px;
height: 200px;
}
table {
width: 500px;
height: 300px;
table-layout: fixed;
}
td, tr {
border: 1px solid red;
}
td {
text-align: center;
vertical-align: middle;
padding: 20px;
}
span.description {
display: none;
}
JS example code:
$('td').hover(
function () {
$(this).find('span.description').css({
'display': 'block'
});
},
function () {
$(this).find('span.description').css({
'display': 'none'
});
}
);
You can see, if hover, it will show description, but height of table row will increase. I want it to be fix, so, before hover, title will center, when hover, all content will center, but not affect table content height. How can I do this?

Try setting a height in td, to a value which can hold both default and hover content.
td {
text-align: center;
vertical-align: middle;
padding: 20px;
height: 120px;
}
JSFiddle

Update the following css classes:
td {
text-align: center;
vertical-align: middle;
padding: 20px;
height:100px;
}
span.description {
display: none;
height:80px;
overflow:auto;
}
look at the updated JSFillde

You need to add a div tag inside each with class on div.
Just like that.
<td>
<div class="setHeight">
<span class="title">This Is Title</span>
<span class="description">Here is description. Here is description. Here is description. Here is description. Here is description.</span>
</div>
</td>
You can add setHeight class as well.
div .setHeight{
width:auto;
height:100px;
}
http://jsfiddle.net/CodeAstro/a8ZLJ/2/

Centering an <img> vertically inside of a table <td>

I am trying to center these images vertically inside of the table without having to edit the picture so that they are the same size. Tried a few things... I know whenever I want to center something horizontally I use margin-left: auto; margin-right: auto; So I thought maybe the same would apply here, but with top and bottom, but no dice.
EDIT: Here is another idea... would it be possible to set up a javascript to run as the page is opened to position all of the text spans as low as the lowest span in that row?
Just a thought... let me know what you think
Any help would be much appreciated.
Here is the fiddle: http://jsfiddle.net/58u4g/1/
Thanks in advance

CSS vertical alignment is different across all browsers - especially if you want to keep the text in the same cell.
I recommend creating a fixed height block for the images to go in, and using a vertical align hack to get the image vertically centered within that div (I know, hacks are bad).
JSFiddle: http://jsfiddle.net/58u4g/8/
Vertical align hack: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
Relevant CSS:
.valign {
width: 100%;
display: block;
display: table;
height: 100%;
#position: relative;
overflow: hidden;
}
.valign > span {
display: block;
#position: absolute;
#top: 50%;
display: table-cell;
vertical-align: middle;
}
.valign> span > span {
display: block;
#position: relative;
#top: -50%;
}
#posiflex_directory td .image {
height: 160px;
display: block;
}

I'd do it differently for the sake of separating elements to have better control over them, even though my fiddle is not clean and is a mash of your sample plus the bits I through in :)
<table id="posiflex_directory">
<tr class="theimgs">
<td>
<a href="../posiflex/tx_overview.aspx" id="posiTXIcon">
<span class="valigner"></span>
<img height="125" src="https://www.metsales.com/MetropolitanSales/microsite/posiflex/images/home_icons/tx-4200.png" width="200"/>
</a>
</td>
<td>
<a href="../posiflex/cd_overview.aspx" id="posiCDIcon">
<span class="valigner"></span>
<img height="103" src="https://www.metsales.com/MetropolitanSales/microsite/posiflex/images/home_icons/CR6300.png" width="200"/>
</a>
</td>
</tr>
<tr>
<td class="imgtext"><span>TX Fan-Free Series</span></td>
<td class="imgtext"><span>Cash Drawers</span></td>
</tr>
</table>
#posiflex_directory {
text-align: center;
}
#posiflex_directory a {
color: inherit;
position: relative;
}
#posiflex_directory td {
border: solid 1px;
}
#posiflex_directory .theimgs {
width: 215px;
height: 225px;
padding: 5px;
border: solid 1px;
}
#posiflex_directory span {
left: 0;
right: 0;
top:100%;
bottom: 5px;
text-decoration: underline;
font-weight: bold;
}
img {
border: solid 1px;
}
.valigner {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.imgtext{
height:40px;
}

Cut text in table

<table id="tab">
<tr><td class="sub">mmmmm</td><td class="sub">jjjjj</td></tr>
<tr><td class="sub">lllll</td><td class="sub">wwwww</td></tr>
</table>
#tab td {
border: 1px solid green;
max-width: 40px;
}
$(".sub").each(function(){
var o = $(this).html();
$(this).html(o.substring(0, 2))
})
LIVE EXAMPLE: https://jsfiddle.net/UTYLf/1/
i would like max-width for TD - 40px. i would like cut overflow text. I made substring but this is not usefriendly.
mm != ll and jj != ww etc. mm and ll has 2 chars, but mm takes more space than a ll.
In my example i would like have in table same as in this example: https://jsfiddle.net/Eb6WN/
what I must use instead of substr()?
I can use HTML, CSS, JavaScript (jQuery) and PHP

In these types of situations I use overflow: hidden as well as adding a title for each cell to display the complete text:
#tab td {
border: 1px solid green;
max-width: 40px;
overflow: hidden;
}
$(".sub").each(function(){
$(this).attr("title", $(this).text()).css("cursor", "help");
})
https://jsfiddle.net/hunter/UTYLf/4/

This (text-overflow: ellipsis; white-space: nowrap; overflow: hidden;) should sort you out, I think...

You could try adding the text-overflow property to your first CSS class.
#tab td {
border: 1px solid green;
max-width: 40px;
text-overflow: ellipsis;
}
Some documentation about text-overflow can be found here.

Why don't you use overflow: hidden; for this?

There is also a jQuery plugin that allows to have this multiline
http://plugins.jquery.com/plugin-tags/ellipsis