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

Question

我有一个不同高度的表格单元格。我想在最后一个单元格中有 1 个或多个跨度，并有一些要求:

• 高度必须等于整个行高，最重要
• 宽度必须等于跨度。所以完全适合右边，左边没有空格。

我找不到解决方案。

CSS:

* {
  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;
}

和 HTML:

<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>

我在最后一个 td 和按钮容器上尝试了相对/绝对位置，但它会落在 table 外面当然我试过 height:100%，没区别

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

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

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

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

Answer 1

在 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可以保持不变