Question

我有一个使用display: table-row和table-cell布局的表单，其中每行包含两个单元格：标签和输入。两个单元格都有一个未指定的宽度，因为我希望它们与它们内部的内容一起拉伸。

但是，在特定单元格中，我需要添加一个包含额外信息的元素。无论信息有多长，我都不希望它伸展右手细胞。我只是希望文本包装，好像块的宽度设置，但没有设置一个（因为我不知道它将是什么）

.row {
    display: table-row;
    outline: 1px solid black;
}
.cell {
    display: table-cell;
    padding: 5px;
}
.info {
    display: block;
}

<div class="row">
    <div class="cell">Label</div>
    <div class="cell input">
        <input type="text" />
    </div>
</div>
<div class="row">
    <div class="cell">Another label</div>
    <div class="cell input">
        <input type="text" />
        <span class="info">This text should not make the cell larger</span>
    </div>
</div>

我知道相对较新的width: min-content应该能够处理这个问题，它会在inline blocks上进行处理，但这无法使用table-cell的目的，我在{{}期间发现了.info {3}} X。 IE也不支持它，我确实需要它。

我尝试在新行上设置inline到inline-block和<br>（使用display: block和伪元素word-break: break-word），都与max-width: 0结合，但无济于事。

奇怪的是，当我在呈现页面后使用.input div （使用开发人员工具）时，单元格将缩小以适应输入，并生成完全符合预期的效果。但是，事先设置此值实际上将强制使用0宽度单元格，并且所有内容都将溢出。
我真的不想在使用javascript渲染后设置此值。是否有CSS方法可以做到这一点？

Answer 1

灵感来自table-cell - some kind of colspan?，在里面使用另一个CSS表格布局，并假设你想要一个像

这样的结果

Render example

我们的想法是为你想要的部分使用表格标题，使其只与上面的项目一样宽。

.row {
  display: table-row;
  outline: 1px solid black;
}
.cell {
  display: table-cell;
  padding: 5px;
}
.info {
  display: table-caption;
  caption-side: bottom;
  width: 100%;
}

<div class="aTable">
  <div class="row">
    <div class="cell">
      <label for="inp1">Label</label>
    </div>
    <div class="cell input">
      <input type="text"  id="inp1" />
    </div>
  </div>
  <div class="row">
    <div class="cell">
      <label for="inp2">Another label</label>
    </div>
    <div class="cell">
      <div class="aTable">
        <div class="row">
          <div class="input">
            <input type="text" id="inp2" />
            <label>
              <input type="radio" id="r1" name="radioChoice" value="radiogaga" />
              Radio GAGA
            </label>
            <label>
              <input type="radio" id="r2" name="radioChoice" value="radiokaos" checked />
              Radio KAOS
            </label>
          </div>
          <div class="info">
            This text should not make the cell any larger - it works in my testing with IE11 and FF32.0.2.
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

简化@AndrewMorton's answer，

<span class="info">
    <span class="info-inner">
        This text should not make the cell larger
    </span>
</span>

.info {
    display: table;
    width: 100%;
}
.info-inner {
    display: table-caption;
}

.row {
    display: table-row;
    outline: 1px solid black;
}
.cell {
    display: table-cell;
    padding: 5px;
}
.info {
    display: table;
    width: 100%;
}
.info-inner {
    display: table-caption;
}

<div class="row">
    <div class="cell">Label</div>
    <div class="cell input">
        <input type="text" />
    </div>
</div>
<div class="row">
    <div class="cell">Another label</div>
    <div class="cell input">
        <input type="text" />
        <span class="info">
            <span class="info-inner">
                This text should not make the cell larger
            </span>
        </span>
    </div>
</div>

Answer 3

由于对某个特定无关列的宽度进行了一些无关的修改，实际需要一个固定的宽度，我偶然发现了这个问题：

.input { 
    width: 1px;
}

我完全忽略了这样一个事实：在display: table-cell的元素上，width属性在其他元素上的作用类似于min-width。因此，通过设置1像素宽度，单元格总是缩小到所需的最小宽度。输入不能缩小，因此单元格所占的最小尺寸，.info元素实际上被包裹以适合单元格内部。这完全解决了我在一个简单的CSS规则中的问题。

如果我想要一个做的元素现在按下单元格宽度，我可以简单地在其上设置一个宽度，或者使用white-space: nowrap不要将它包裹起来（那么它只需要推动细胞边界。）

＆＃13;

.row {
    display: table-row;
    outline: 1px solid black;
}
.cell {
    display: table-cell;
    padding: 5px;
}
.input { 
    width: 1px;
}
.info {
    display: block;
}

＆＃13;

<div class="row">
    <div class="cell">Label</div>
    <div class="cell input">
        <input type="text" />
    </div>
</div>
<div class="row">
    <div class="cell">Another label</div>
    <div class="cell input">
        <input type="text" />
        <span class="info">This text should not make the cell larger</span>
    </div>
</div>

＆＃13;

Answer 4

好的，这是一张我相信你会问的表。

我无法想到预先选择下面p元素的任意宽度的问题;如果你想要一个小于输入框的元素（最小宽度），那么它没有问题，并且无论如何都不会改变尺寸。

但是，如果要添加比输入框更大的描述元素（并且会增加单元格的宽度），或者您想要添加内容，那么单元格无论如何都会增长。

我想，如果不了解你将拥有的所有元素，我将很难说出来。在评论中你也提到了单选按钮。我会为每种类型的输入设备添加一个不同的类（框，单选按钮，真/假选择，滑块，下拉框），并为每个类型设置一个唯一的固定宽度。

然而，在那时，它实际上可能在JavaScript中更容易（更少的LOC）。我不能在那里推测，因为我不太了解JavaScript。

<强> JSFiddle

<table rules="rows">
    <tr>
        <td>This is a super long label to show that the table can grow.</td>
        <td class="right-col"><input/></td>
    </tr>
    <tr>
        <td>Another Label</td>
        <td class="right-col"><input/>Delete this text to see that non "p" description text will still make the table shrink or grow.<p>This is a fixed-width description with the same length as the input element above.</p></td>
    </tr>
    <tr>
        <td>A Third Label</td>
        <td class="right-col"><input type="radio"/>This text gets to expand the cell.<p>Another test example.</p></td>
    </tr>
</table>

CSS：

table {
    border: 1px solid black;
}

.right-col p {
    margin: 0;
    width: 150px;
    color: red;
}

input[type=radio] ~ p {
    margin: 0;
    width: 25px;
    color: blue;
    word-wrap: break-word;
}

强制元素不要水平拉伸表格单元格

4 个答案: