第一列的表符合内容，第二列溢出-x auto

Question

我正在尝试制作一个包含以下属性的2列表：

1. 该表必须适合其父容器
2. 第一列必须符合其内容
3. 第二列内容必须是水平滚动的 超过桌子宽度。

►我从以下代码开始：

（这里的css只是“看”主容器和表 - 宽度：500px仅用于示例，它可以是任何值）

.main {
  width: 500px;
  border: 1px solid black;
}

table {
  background: rgba(0,0,0,0.5);
}

<div class="main">
  
  <table>
    <tr>
      <td class="one">content_1</td>
      <td class="two">
        <div class="content">short string</div>
      </td>
    </tr>
    
    <tr>
      <td class="one">content_2</td>
      <td class="two">aVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongStringWithoutSpaces</td>
    </tr>
  </table>
  
</div>

点 1 不正常：表格不适合其容器

点 2 确定：第一列适合其内容

指向 3 不正常：由于该表格不适合其容器，我暂时无法应用overflow: auto

►我发现使表格适合其容器的唯一方法是添加以下css属性：table-layout: fixed＆amp; width: 100%

然后我可以添加width:100%，display: inline-block＆amp; overflow: auto到第二列，如果内容超出表格宽度，则可以滚动内容

.main {
  width: 500px;
  border: 1px solid black;
}

table {
  background: rgba(0,0,0,0.5);
  table-layout: fixed;
  width: 100%;
}

.two {
  width:100%;
  display: inline-block;
  overflow: auto;
}

<div class="main">
  
  <table>
    <tr>
      <td class="one">content_1</td>
      <td class="two">
        <div class="content">short string</div>
      </td>
    </tr>
    
    <tr>
      <td class="one">content_2</td>
      <td class="two">aVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongStringWithoutSpaces</td>
    </tr>
  </table>
  
</div>

点 1 现在确定：表适合其容器

点 2 不正常：table-layout: fixed生成两列

指向 3 现在确定：如果第二列的内容太长，则可滚动

►所以现在我正在寻找一个可以获得3分的解决方案。

为了得到最接近我需要的东西，我将width: 50px设置为.one类，但在我的项目中我不能这样做，因为我在第一个中有几个不同内容大小的表列，所以我需要自动设置第一列的大小以适应第一个片段中的内容。

任何帮助？

Answer 1

您可以word-break:break-all使用.two

＆＃13;

＆＃13;

.main {
  width: 500px;
  border: 1px solid black;

}

table {
  background: rgba(0,0,0,0.5);
  width: 100%;
}
.two{
  word-break:break-all;
}

＆＃13;

<div class="main">
  
  <table>
    <tr>
      <td class="one">content_1</td>
      <td class="two">
        <div class="content">short string</div>
      </td>
    </tr>
    
    <tr>
      <td class="one">content_2</td>
      <td class="two">aVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongStringWithoutSpaces</td>
    </tr>
  </table>
  
</div>

＆＃13;

＆＃13;

＆＃13;