在可拉伸表格中换行答案

【问题标题】：Wrap text in stretchable tables在可拉伸表格中换行
【发布时间】：2015-06-21 17:04:03
【问题描述】：

我在居中的 div 的两侧各有两张桌子。我希望左侧表格中的内容在右侧对齐，右侧表格中的内容在左侧对齐。我设法通过在左侧表格中创建一个额外的列并在第一个单元格上设置 width: 100% 并在第二个单元格上设置 white-space: nowrap 来做到这一点。

问题是，因为nowrap属性，当表格太小时内容溢出。我尝试设置word-wrap: break-word 是徒劳的。如何强制内容适合表格宽度？

到目前为止，这是我的代码：JSFIDDLE

#container {
    height: 180px;
    display: flex;
    flex-flow: row;
    align-items: stretch;
    border: 1px dotted gray;
}

table {
    flex: 1;
    display: flex;
    margin: 10px;
    overflow-y: scroll;
    overflow-x: hidden;
    border: 1px dashed blue;
}

tbody {
    display: block;
    margin: auto 0;
}

td {
    padding: 5px;
    border: 1px solid red;
}

#left td:nth-child(1){
   width: 100%;
}

#left td:nth-child(2) {
    white-space: nowrap;
}

#list, #center {
    width: 100px;
    margin: 10px;
    border: 1px dotted gray;
}

<div id="container">
    <div id="list"></div>
    <table id="left">
        <tbody>
            <tr>
                <td></td>
                <td>Lorem ipsum dolor sit amet</td>
            </tr>
            <tr>
                <td></td>
                <td>Valar morghulis</td>
            </tr>
            <tr>
                <td></td>
                <td>One fish, two fish, red fish, blue fish</td>
            </tr>
        </tbody>
    </table>
    <div id="center"></div>
    <table id="right">
        <tbody>
            <tr><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td></tr>
            <tr><td>The quick brown fox jumps over the lazy dog</td></tr>
            <tr><td>Would you kindly help me out</td></tr>
            <tr><td>Supercalifragilisticexpialidocious</td></tr>
            <tr><td>Alpha</td></tr>
            <tr><td>Bravo</td></tr>
            <tr><td>Charlie</td></tr>
            <tr><td>Delta</td></tr>
            <tr><td>Echo</td></tr>
            <tr><td>Foxtrot</td></tr>
            <tr><td>Golf</td></tr>
        </tbody>
    </table>
</div>

【问题讨论】：

这很令人困惑，因为您在 CSS 中将表格更改为 flexbox，我认为它不再像真正的表格了。
@Pangloss 我在 tbody 上设置了display: block 来解决这个问题。 See here
我不知道你想要这样 - jsfiddle.net/6yrp73yy/2 是吗？
@Pangloss 左侧表格中的两列宽度相同。第一列不应该占用比需要更多的空间，刚好足以将第二列推到右侧。
不知道你要做什么，空的tds不能去掉吗？ - jsfiddle.net/6yrp73yy/3 如果需要调整文本对齐方式，只需使用 text-align 属性即可。

标签： html css flexbox word-wrap

【解决方案1】：

这个怎么样： DEMO

删除多余的列并将margin-left:auto添加到左侧tbody

去掉无包装

#left tbody{
    margin-left:auto;
}

【讨论】：

谢谢！是否也可以打破长词（Supercalifragilisticexpialidocious），以免它们溢出？ word-wrap: break-word 不适合我。
您将无法让它与桌面上的display:flex 一起使用。这是一个错误bugzilla.mozilla.org/show_bug.cgi?id=1136818

【解决方案2】：

有多种方法可以沿主轴对齐 flex 容器内的 flex 项。

justify-content

justify-content 属性与 flex items 沿弹性容器当前行的main axis。这个完成了在任何灵活长度和任何auto margins 之后解决了。

#left {
  justify-content: flex-end;
}

#container {
  height: 180px;
  display: flex;
  border: 1px dotted gray;
}
table {
  flex: 1;
  display: flex;
  margin: 10px;
  overflow-y: scroll;
  overflow-x: hidden;
  border: 1px dashed blue;
}
tbody {
  display: block;
  margin: auto 0;
}
td {
  padding: 5px;
  border: 1px solid red;
}
#left {
  justify-content: flex-end;
}

<div id="container">
  <table id="left">
    <tbody>
      <tr>
        <td>Lorem ipsum dolor sit amet</td>
      </tr>
      <tr>
        <td>Valar morghulis</td>
      </tr>
      <tr>
        <td>One fish, two fish, red fish, blue fish</td>
      </tr>
    </tbody>
  </table>
  <table id="right">
    <tbody>
      <tr><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td></tr>
      <tr><td>The quick brown fox jumps over the lazy dog</td></tr>
      <tr><td>Would you kindly help me out</td></tr>
      <tr><td>Supercalifragilisticexpialidocious</td></tr>
      <tr><td>Alpha</td></tr>
      <tr><td>Bravo</td></tr>
      <tr><td>Charlie</td></tr>
      <tr><td>Delta</td></tr>
      <tr><td>Echo</td></tr>
      <tr><td>Foxtrot</td></tr>
      <tr><td>Golf</td></tr>
    </tbody>
  </table>
</div>

flex-direction

flex-direction 属性指定了flex items 的方式放置在 flex 容器中，通过设置 flex 的方向容器的main axis。这决定了弯曲的方向项目被布置在里面。

如果您使用row-reverse（或column-reverse）而不是row（或column），您将交换main-start 和main-end 方向。

#left {
  flex-direction: row-reverse;
}

#container {
  height: 180px;
  display: flex;
  border: 1px dotted gray;
}
table {
  flex: 1;
  display: flex;
  margin: 10px;
  overflow-y: scroll;
  overflow-x: hidden;
  border: 1px dashed blue;
}
tbody {
  display: block;
  margin: auto 0;
}
td {
  padding: 5px;
  border: 1px solid red;
}
#left {
  flex-direction: row-reverse;
}

<div id="container">
  <table id="left">
    <tbody>
      <tr>
        <td>Lorem ipsum dolor sit amet</td>
      </tr>
      <tr>
        <td>Valar morghulis</td>
      </tr>
      <tr>
        <td>One fish, two fish, red fish, blue fish</td>
      </tr>
    </tbody>
  </table>
  <table id="right">
    <tbody>
      <tr><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td></tr>
      <tr><td>The quick brown fox jumps over the lazy dog</td></tr>
      <tr><td>Would you kindly help me out</td></tr>
      <tr><td>Supercalifragilisticexpialidocious</td></tr>
      <tr><td>Alpha</td></tr>
      <tr><td>Bravo</td></tr>
      <tr><td>Charlie</td></tr>
      <tr><td>Delta</td></tr>
      <tr><td>Echo</td></tr>
      <tr><td>Foxtrot</td></tr>
      <tr><td>Golf</td></tr>
    </tbody>
  </table>
</div>

Auto margins

在通过justify-content 和align-self 对齐之前，任何正的可用空间都分配到自动边距维度。

#left > tbody {
  margin-left: auto;
}

#container {
  height: 180px;
  display: flex;
  border: 1px dotted gray;
}
table {
  flex: 1;
  display: flex;
  margin: 10px;
  overflow-y: scroll;
  overflow-x: hidden;
  border: 1px dashed blue;
}
tbody {
  display: block;
  margin: auto 0;
}
td {
  padding: 5px;
  border: 1px solid red;
}
#left > tbody {
  margin-left: auto;
}

<div id="container">
  <table id="left">
    <tbody>
      <tr>
        <td>Lorem ipsum dolor sit amet</td>
      </tr>
      <tr>
        <td>Valar morghulis</td>
      </tr>
      <tr>
        <td>One fish, two fish, red fish, blue fish</td>
      </tr>
    </tbody>
  </table>
  <table id="right">
    <tbody>
      <tr><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td></tr>
      <tr><td>The quick brown fox jumps over the lazy dog</td></tr>
      <tr><td>Would you kindly help me out</td></tr>
      <tr><td>Supercalifragilisticexpialidocious</td></tr>
      <tr><td>Alpha</td></tr>
      <tr><td>Bravo</td></tr>
      <tr><td>Charlie</td></tr>
      <tr><td>Delta</td></tr>
      <tr><td>Echo</td></tr>
      <tr><td>Foxtrot</td></tr>
      <tr><td>Golf</td></tr>
    </tbody>
  </table>
</div>

插入带有正数flex grow factor的伪元素

弹性增长因子决定了flex item 将相对于 flex 中的 flex items 的其余部分增长分配正可用空间时的容器。

#left::before {
  content: '';
  flex-grow: 1;
}

#container {
  height: 180px;
  display: flex;
  border: 1px dotted gray;
}
table {
  flex: 1;
  display: flex;
  margin: 10px;
  overflow-y: scroll;
  overflow-x: hidden;
  border: 1px dashed blue;
}
tbody {
  display: block;
  margin: auto 0;
}
td {
  padding: 5px;
  border: 1px solid red;
}
#left::before {
  content: '';
  flex-grow: 1;
}

<div id="container">
  <table id="left">
    <tbody>
      <tr>
        <td>Lorem ipsum dolor sit amet</td>
      </tr>
      <tr>
        <td>Valar morghulis</td>
      </tr>
      <tr>
        <td>One fish, two fish, red fish, blue fish</td>
      </tr>
    </tbody>
  </table>
  <table id="right">
    <tbody>
      <tr><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td></tr>
      <tr><td>The quick brown fox jumps over the lazy dog</td></tr>
      <tr><td>Would you kindly help me out</td></tr>
      <tr><td>Supercalifragilisticexpialidocious</td></tr>
      <tr><td>Alpha</td></tr>
      <tr><td>Bravo</td></tr>
      <tr><td>Charlie</td></tr>
      <tr><td>Delta</td></tr>
      <tr><td>Echo</td></tr>
      <tr><td>Foxtrot</td></tr>
      <tr><td>Golf</td></tr>
    </tbody>
  </table>
</div>

【讨论】：