Question

我希望实现4列布局，其中我有前3列的动态文本（小或大，所以不确定它们的宽度）。我希望第4列宽度作为前3列宽度的其余部分。例如，如果父容器是200px，前3列内容需要120px，那么我的第4列应该自动为80px，我想在其中应用文本溢出。

我正在用桌子尝试这个但是我被困住而没有做什么。这是我的尝试 - JSFiddle

<div>
  <table>
    <tr>
        <td class="shrink">Dynamic text</td>
        <td class="shrink">Dynamic text</td>
        <td class="shrink">Dynamic text</td>
        <td class="expand">last column I should not wrap down or I should not go beyond the parent width.</td>
    </tr>
  </table>
</div>

我对CSS3 flex或CSS3 Grid不熟悉，但如果能够轻松实现这一点，那么我很乐意使用它。

更新

我希望列之间的空间为每列5px。这与文本内容无关。它的长短。此外，我不希望任何内容下拉到下一行，因此我将使用white-space:nowrap。

Answer 1

我希望这可以帮助你...

table {
    border: 1px solid green;
    border-collapse: collapse;
    width:100%;
}

table td {
    border: 1px solid green;
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

table td.shrink {
    width: 20%;
}
table td.expand {
    width: 40%;
}
div {
  border: 1px solid green;
  width: 500px
}

<div>
  <table>
    <tr>
        <td class="shrink">Dynamic text</td>
        <td class="shrink">Dynamic text</td>
        <td class="shrink">Dynamic text</td>
        <td class="expand">last column I should not wrap down or I should not go beyond the parent width.</td>
    </tr>
   
</table>
</div>

Answer 2

你可以做这样的事情，玩font-size属性和first-line伪元素。原文仍然有效，但你看不到它......

table {
  border: 1px solid green;
  border-collapse: collapse;
  width: 100%;
  font-size: 12pt;
}

table td {
  border: 1px solid green;
}

table td.shrink {
  white-space: nowrap
}

table td.expand {
  width: 100%;
  font-size: 0.01em;
  word-break: break-all;
  position: relative;
  padding-right: 100em;
}

table td.expand:first-line {
  font-size: 100em;
  float: left;
}

table td.expand:after {
  content: "\2026";
  position: absolute;
  right: 0px;
  top: 0px;
  width: 1em;
  font-size: 100em;
  height: 100%;
}

div {
  border: 1px solid green;
  width: 500px
}

<div>
  <table>
    <tr>
      <td class="shrink">Dynamic text</td>
      <td class="shrink">Dynamic text</td>
      <td class="shrink">Dynamic text</td>
      <td class="expand">last column I should not wrap down or I should not go beyond the parent width.</td>
    </tr>
  </table>
</div>

Answer 3

只需将宽度设置为容器，表格和前三列，然后自动将最后一列设置为容器的剩余部分。这是一个工作样本。我希望这就是你要找的东西。

＆＃13;

.container {
    width: 1000px;
}

.container table {
    width: 100%;
}

.container table tr td {
    /*border: 1px solid black;*/
}

.container table tr td.shrink {
    /*width: 120px;*/
}

＆＃13;

<div class="container">
    <table>
        <tr>
            <td class="shrink">Dynamic text</td>
            <td class="shrink">Dynamic text</td>
            <td class="shrink">Dynamic text</td>
            <td class="expand">last column I should not wrap down or I should not go beyond the parent width.</td>
        </tr>
    </table>
</div>

＆＃13;

将最后一列宽度设置为父总容器宽度的其余部分

3 个答案: