如何制作具有最小侧面单元宽度和可调节中心单元的可调节工作台

Question

我需要制作一个有3列的表格，侧栏应该有最小宽度来显示内容，中央应该是可调整的。

如果表格宽度达到容器的宽度，则应使用省略号截断中心列中的文本。但如果中间栏中的内容很短，那么列也应该短，右侧列应该接近中心列的内容。

下面有两种不同的解决方案，不幸的是它们对我来说都不是完美的。

在第三行的这一行为不正确 - 右侧列的内容不在中心列的内容附近： https://jsfiddle.net/rqLsdvwd/4/

＆＃13;

＆＃13;

.main {
  display: table;
  white-space: nowrap;
}

.box {
  display: table-cell;
  padding: 5px;
}

.sidebar {
  width: 1%;
  background-color: green;
}

.content {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 0px;
  background-color: yellow;
}

＆＃13;

<div style="width:600px">

   <div class="main">
    <div class="box sidebar">Short info 1</div>
    <div class="box content">Long Information with spaces Long Information with spaces Long Information with spaces Long Information with spaces</div>
    <div class="box sidebar">Short info 2</div>
  </div>
  
  <div class="main">
    <div class="box sidebar">Short info 1</div>
    <div class="box content">LongInformationWithoutSpacesLongInformationWithoutSpacesLongInformationWithoutSpacesLongInformationWithoutSpaces</div>
    <div class="box sidebar">Short info 2</div>
  </div>
  
   
  <div class="main">
    <div class="box sidebar">Short info 1</div>
    <div class="box content">Short info 2</div>
    <div class="box sidebar">Short info 3 which should be near Short info 2</div>
  </div> 
  
</div>

＆＃13;

＆＃13;

＆＃13;

在这个没有空格的文本中没有被截断： https://jsfiddle.net/7gbux944/3/

＆＃13;

＆＃13;

.main {
  width:600px;
}

.sidebar {
  background-color: green;
  white-space: nowrap;
}

.content::after {
    content: attr(title);
    display: inline-block;
    height: 0px;
    overflow: hidden;
}

.content::before {
    content: attr(title);
    position: absolute;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.content {
    position: relative;
    background-color: yellow;
}

＆＃13;

<div class="main">
  <table>
    <tbody>
      <tr>
        <td>
          <div class="sidebar">Short info1</div>
        </td>
        <td>
        <div><span class="content" title="Long Information with spaces Long Information with spaces Long Information with spaces Long Information with spaces"></span></div>
        </td>
        <td>
          <div class="sidebar">Short info1</div>
        </td>
      </tr>
    </tbody>
  </table>
  <table>
    <tbody>
      <tr>
        <td>
          <div class="sidebar">Short info1</div>
        </td>
        <td>
        <div><span class="content" title="LongInformationWithoutSpacesLongInformationWithoutSpacesLongInformationWithoutSpacesLongInformationWithoutSpaces"></span></div>
        </td>
        <td>
          <div class="sidebar">Short info1</div>
        </td>
      </tr>
    </tbody>
  </table>
  <table>
    <tbody>
      <tr>
        <td>
          <div class="sidebar">Short info1</div>
        </td>
        <td>
        <div><span class="content" title="Short info2"></span></div>
        </td>
        <td>
          <div class="sidebar">Short info3</div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

＆＃13;

＆＃13;

＆＃13;

有人可以建议我吗？

Answer 1

这不是一个表，只是一系列独立的行。

然而。 Flexbox可以做到这一点

＆＃13;

＆＃13;

.parent {
  width: 600px;
  margin: 1em auto;
}
.main {
  display: flex;
  margin-bottom: 1em;
}
.box {
  flex: 0 0 auto;
  padding: 5px;
}
.sidebar {
  background-color: green;
}
.content {
  flex: 0 1 auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  background-color: yellow;
}

＆＃13;

<div class="parent">

  <div class="main">
    <div class="box sidebar">Short info 1</div>
    <div class="box content">Long Information with spaces Long Information with spaces Long Information with spaces Long Information with spaces</div>
    <div class="box sidebar">Short info 2</div>
  </div>
  <div class="main">
    <div class="box sidebar">Short info 1</div>
    <div class="box content">LongInformation</div>
    <div class="box sidebar">Short info 2</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

但请注意，这不会像桌子那样;各种＆＃34;细胞的宽度＆＃34;每一行与＃34; cell＆＃34;在任何其他行。