如何在HTML5 / css3中創建一個水平換行的“表”？

Question

我有下表使用html table，tr，td標簽。

這一切都很棒，但我使用角度，問題是如果我有更多的行，我沒有垂直的空間。 相反，我想“溢出”它的右邊，使它看起來像：

什么是使用HTML5 / CSS的最佳方式，以便我可以使內容溢出，如果它超出表？ 請注意，在某些情況下，我可能有2或3個條目，所以我希望我不必在開始時使寬度加倍於正常大小，而是根據我擁有的條目數量來確定表的大小在表中。 沒有滾動條。

我覺得HTML中的表格標簽是限制性的，可能不允許我這樣做。 做這個的最好方式是什么？ 使用div？

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

嘗試使用flexbox方法，雖然看起來如果我將flexbox放在div中，但是一旦條目超出第一列，背景似乎不會正確填充：

https://jsfiddle.net/t0h7w2hw/

Answer 1

請按照下面的代碼示例

這將在移動設備中以列表樣式包裝行。 您需要為每個內容td添加數據標簽屬性，以便它知道它是哪個列。 在移動設備中，您可以使用css內容：“”屬性在td之前顯示標簽。

 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

實際上，沒有使用CSS為HTML表元素定義這樣的工具。 我嘗試了一些通過給表和包含div的各種位置，沒有工作。 與您提供的小提琴示例一樣，您必須使用HTML div元素。

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/

您只需要為第一列創建一大塊記錄，您可以在控制器本身中創建，然后在ng-repeat的幫助下，您可以渲染它

Answer 4

使用div和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> 

小提琴

Answer 5

這一切都很棒，但我使用角度，問題是如果我有更多的行，我沒有垂直的空間。

什么角度與任何這個有關？

[..]如果我有更多行，我沒有垂直空間。 相反，我想“溢出”到它的右邊

表格不會給你那種靈活性，尤其是你不能控制行的高度和流量作為列。

[..]這樣我可以使內容溢出，如果超出表格？ 請注意，在某些情況下，我可能有2或3個條目，所以我希望我不必在開始時使寬度加倍於正常大小，而是根據我擁有的條目數量來確定表的大小在表中。

一種簡單快捷的方法是將行拆分為自己的表。 如果您可以擁有該結構，那么只需使用CSS columns 。

通常，您將所有這些表包裝在一個具有height約束的div中。 在包裝div上設置column-*屬性，然后就可以了。 您可以使用column-gap ， column-rule ， column-span和column-fill屬性來美化整個東西。

另請注意，您需要使用break-inside: avoid在桌面上使用，以避免它們在流向下一列時中途中斷。

示例代碼段：

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

---

在上面的代碼片段中，包裝div是高度約束的，您可以看到列流動。

使用此小提琴嘗試更改窗口大小並查看效果。

[..]所以我希望我不必在開始時將寬度增加到正常大小的兩倍，而是根據表中的條目數量來確定表的大小。 沒有滾動條。

包裝div將自己全寬。 但是，您可以通過overflow來控制溢出的處理方式。 根據內容的寬度動態改變寬度是一個完全不同的球類游戲，你需要JavaScript，它會變得混亂。

注意：要使上述示例起作用，您需要修復表格的寬度，以使列整齊排列。 您可以使用table-layout: fixed來使用固定布局。