如何在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

这一切都很棒，但我使用的是角度，问题是如果我有更多行，我就没有垂直空间。

角度与这一切有什么关系？

[..] 如果我有更多行，我就没有垂直空间。相反，我想“溢出”到它的右侧

表格不会为您提供这种灵活性，尤其是您将无法控制行作为列的高度和流动。

[..] 这样我就可以使内容超出表格时溢出？请注意，在某些情况下，我可能有 2 或 3 个条目，因此我希望不必在开始时将宽度设为正常大小的两倍，而是根据我拥有的条目数调整表格的大小在表中。

一种简单快捷的方法是将行拆分为自己的表。如果你能拥有这样的结构，那么使用 CSScolumns就很简单了。

通常，您会将所有这些表包装在一个div有其height约束的表中。设置column-*包装材料的属性div即可。您可以使用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使用固定布局。