在可伸缩表格中包装文本

Question

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

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

到目前为止，这是我的代码：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>

Answer 1

这个怎么样： DEMO

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

删除 nowrap

#left tbody{
    margin-left:auto;
}

Answer 2

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

justify-content

The justify-content property aligns flex items along the main axis of the current line of the flex container. This is done after any flexible lengths and any auto margins have been resolved.

#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

The flex-direction property specifies how flex items are placed in the flex container, by setting the direction of the flex container’s main axis. This determines the direction that flex items are laid out in.

如果您使用 row-reverse（或 column-reverse）而不是 row（或 column），您将交换 main-start and 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

Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.

#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

The flex grow factor determines how much the flex item will grow relative to the rest of the flex items in the flex container when positive free space is distributed.

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

在可伸缩表格中包装文本

Wrap text in stretchable tables

html

css

word-wrap

flexbox