How can I make a “table” where the lines wrap horizontally in HTML5 / css3?

Question

I have the following table using html table, tr, td tags.

This is all great, but I use angular, and the problem is that if I have more lines, I have no room for it vertically. Instead, I want to “overflow” to his right so that it looks like this:

What is the best way to use HTML5 / CSS so that I can make it so that the content spills if it exceeds the table? Please note that in some cases I may have 2 or 3 records, so I hope that I do not need to double the width compared to the usual one at the beginning, but instead have the size of the table depending on the number of records that I have a table. No scrollbars.

It seems to me that the table tag in HTML is restrictive and does 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> 

Trying the flexbox approach, although it seems that if I put flexbox in a div, then the background will not fill correctly as soon as the records go beyond the first column:

https://jsfiddle.net/t0h7w2hw/

Answer 1

This is great, but I use angular, and the problem is that if I have more lines, I have no room for it vertically.

What does angular have to do with this?

[..] If I have more lines, I have no place for it vertically. Instead, I want to "overflow" to the right of it.

Tables do not give you such flexibility, especially, you will not be able to control the height and flow of rows in the form of columns.

[..] so that I can make the content spill if it exceeds the table? Please note that in some cases I may have 2 or 3 entries, so I am hoping that I do not need to make the width twice as large as start, and instead the table will be sized based on the number of entries that I have in the table.

One simple and quick way would be to split your rows into your own tables. If you can have this structure, then this is just a question using CSS columns .

Typically, you wrap all of these tables in a div that will have height restrictions. Set the column-* properties on the wrapper div , and there you go. You can play with column-gap , column-rule , column-span and column-fill properties to decorate the whole thing.

Also note that you will need to use break-inside: avoid in tables to avoid breaking them halfway, moving on to the next column.

Fragment example:

 #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 div wrapper is limited in height and you can see the columns flow.

Use this script to try resizing the window and see the effect.

[..], so I hope that I do not need to make the width twice as normal at the beginning, and instead the table should be calculated based on the number of records that I have in the table. No scrollbars.

The wrapper div will be fully populated. However, you can twist using overflow to control overflow handling. Changing the width dynamically, based on the width of the content, is a completely different ball game in which you need JavaScript, and it gets messy.

Note. . In the above example, you will need to fix the width of your tables so that the columns are neatly aligned. You can use table-layout: fixed to use a fixed layout.

Answer 2

Please follow the below code example

This will result in line wrapping in list style on mobile devices. Each td content needs to be assigned a data label attribute so that it knows which column it is in. On a mobile phone, you can show lable before td using the css: 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> 

Answer 3

Actually, such a tool is not used for the HTML table element using CSS. I am trying to do a few by specifying various positions for the table and containing the div, did not work. As in the example script you provided, you must use the HTML div element for this.

Answer 4

 //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 just need to create a piece of records for the first column, which you can do in the controller itself, and then with ng-repeat you can display it

Answer 5

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