0

I have two tables on either side of a centered div. I'd like the content in the left-hand table to be aligned on the right, and the content in the right-hand table to be aligned on the left. I managed to do so by creating an extra column in the left-hand table and setting width: 100% on the first cells and white-space: nowrap on the second cells.

The problem is, because of the nowrap property, the content overflows when the tables are too small. I tried setting word-wrap: break-word in vain. How can I force the content to fit the table width?

Here is my code so far: 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>
notyourtype
  • 256
  • 1
  • 3
  • 12
  • It's very confusing because you changed the table to flexbox in CSS, it no longer acts like real table anymore I think. – Stickers Jun 21 '15 at 17:06
  • @Pangloss I set `display: block` on the tbody to counter that. [See here](http://stackoverflow.com/questions/30851336/setting-overflow-scroll-on-a-table-with-display-flex) – notyourtype Jun 21 '15 at 17:09
  • I wonder you want it like this - https://jsfiddle.net/6yrp73yy/2/ is it? – Stickers Jun 21 '15 at 17:23
  • @Pangloss Both columns in your left-hand table are the same width. The first column shouldn't take more space than needed, just enough to push the second column to the right. – notyourtype Jun 21 '15 at 17:31
  • I don't know what you're trying to do, can't the empty tds be removed? - https://jsfiddle.net/6yrp73yy/3/ If you need to adjust the text alignment just use `text-align` property. – Stickers Jun 21 '15 at 17:38
  • @Pangloss I edited [your fiddle](https://jsfiddle.net/6yrp73yy/4/) so you can see where the initial problem lies. If you stretch the container's width, you'll see the left-hand table's content looks like it is aligned with the first placeholder. In my post I added an extra column so the table's content would align itself with the second placeholder, and that is the result I want. However, when doing so, the content no longer wraps itself and that is what I am trying to resolve. – notyourtype Jun 21 '15 at 17:48
  • Well, I wish I could suggest more, but problem is I'm having a hard time to understand what you want it to look like. – Stickers Jun 21 '15 at 17:55

2 Answers2

1

How about this: DEMO

Remove the extra column and add margin-left:auto to left tbody

Remove the nowrap

#left tbody{
    margin-left:auto;
}
Miro
  • 8,402
  • 3
  • 34
  • 72
  • Thanks! Is it also possible to break the long words (Supercalifragilisticexpialidocious) so they don't overflow? `word-wrap: break-word` doesn't work for me. – notyourtype Jun 21 '15 at 17:53
  • You won't be able to get it to work with `display:flex` on the the table. It's a bug https://bugzilla.mozilla.org/show_bug.cgi?id=1136818 – Miro Jun 22 '15 at 00:14
0

There are multiple ways to align flex items inside the flex container along the main axis.

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

    If you use row-reverse (or column-reverse) instead of row (or column), you will swap the main-start and main-end directions.

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

  • Inserting pseudo-elements with a positive 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>
Oriol
  • 274,082
  • 63
  • 437
  • 513