如何在HTML5 / css3中创建一个水平换行的“表”？

Question

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/

Answer 1

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> 

Answer 2

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.

Answer 3

//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

Answer 4

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

Answer 5

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.