Question

我有一个不同高度的桌子。我想在最后一个单元格中具有一个或多个跨度，并满足一些要求：

高度必须等于整行高度，最重要的
宽度必须等于跨度。因此完全适合右侧，左侧无空格。

我找不到解决方法。

CSS：

NOT NULL

和HTML：

* {
  box-sizing:border-box;
}

table {
  width:100%;
}
td { border:1px solid blue; }
input {
    height:50px;
}
.buttons {
  width:1px;
  white-space:nowrap;
}
.button {
    padding:5px 20px;
    background:red;
    display:inline-block;
}

我尝试在最后一个td上放置相对/绝对位置，并为按钮放置一个容器，但是它将落在表格之外当然我尝试了身高：100％，没有差异

http://jsfiddle.net/70a6q5kz/3/

-编辑 解决方案 我找到了这个解决方案： CSS：

<table>
    <tr>
        <td><input value="I have height of 50px" /></td>
        <td class="buttons">
            <span class="button" title="I have width of 25px">+</span>
            <span class="button" title="I have width of 25px">+</span>
        </td>
    </tr>
</table>

完整解决方案： http://jsfiddle.net/70a6q5kz/11/

Answer 1

您可以使用flex做一些事情。您还需要删除padding个中的开头td。

检查代码段：

* {
  box-sizing: border-box;
}

table {
  width: 100%;
}

td {
  border: 1px solid blue;
  padding: 0; /* remove initial padding */
}

input {
  height: 50px;
}

.buttons {
  display: flex;
  white-space: nowrap;
}

.button {
  flex: auto;
  width: 25px;
  background: red;
  text-align: center;
}

<table>
  <tr>
    <td><input value="I have height of 50px" /></td>
    <td>
      <div class="buttons">
        <span class="button" title="I have width of 25px">+</span>
        <span class="button" title="I have width of 25px">+</span>
      </div>
    </td>
  </tr>
</table>

Answer 2

在CSS中，您可以从td中删除填充，创建.button：last-of-type并在其上插入margin-right：-1px

* {
  box-sizing:border-box;
}

table {
  width:100%;
}
td { 
  border:1px solid blue;
  padding: 0; /********************************/
 }
input {
    height:50px;
}
.buttons {
  width:1px;
  white-space:nowrap;
  padding: 0;
}
.button:last-of-type{ /*************************/
  margin-right:-1px;  /*************************/
}                     /*************************/
.button {
    padding:15px 20px;
    background:blue;
    display:inline-block;
    height:50px;
}

html可以保持不变

Answer 3

可能的解决方案 我发现这是一个可能的解决方案。简单来说： CSS：

table { height:100%; }
.buttons { height:100% }

完整解决方案： http://jsfiddle.net/70a6q5kz/11/ 在IE 11，FF和chrome中均可使用

CSS-表格单元格中的高度为100

3 个答案: