如何在没有它们包装的情况下在td元素中显示文本和按钮元素？

Question

我目前有一个列出大约100种产品的表格（我相信表格是我要求显示的信息所需要的）。在表格的每一行的末尾是“数量”输入字段，后跟“添加到购物车”输入按钮，如下图所示：

我遇到的问题是减少表格末尾的空白区域。我希望此列折叠到内容的宽度，而不包括数量和按钮输入。

简化的html是：

<table>
    <tr>
        <td>Picture</td>
        <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</td>
        <td id="add-to-cart">
            <input id="qty-input" type="text" value="1" />
            <input id="add-to-cart-button" type="button" value="Add To Cart"/>
        </td>
    </tr>
</table>

简化的css是：

table {
    margin-top: 100px;
    width: 100%;
    border-collapse: collapse;
}

table td {
    border: 1px solid #ddd;
}

#qty-input {
    color: #444;
    font-size: 15px;
    height: 43px;
    padding: 0 12px;
    text-align: center;
    width: 45px;
    border: 1px solid #ddd;
    float: left;
}

#add-to-cart-button {
    background-color: #4ab2f1;
    border: medium none;
    color: #fff;
    font-size: 15px;
    height: 43px;
    padding: 0 24px;
    text-transform: uppercase;
    float: left;
}

注意，我在两个输入元素中添加了“float：left”，否则输入元素之间会有间隙：

为了尝试消除右边的间隙，我添加了以下css（如另一个答案中所述）：

#add-to-cart {
    width: 1%;
    white-space: nowrap;
}

这会删除空白区域但是另外一个问题是浮动字段现在正在包装：

有没有人对我可能做错了什么有任何建议？

这是一个jsfiddle：https://jsfiddle.net/0f6LLu0a/

Answer 1

您可以在white-space: nowrap上使用#add-to-cart并移除浮动广告。您也可以在第二个width: 100%上使用td。

table {
  margin-top: 100px;
  width: 100%;
  border-collapse: collapse;
}
table td {
  border: 1px solid #ddd;
}
#qty-input {
  color: #444;
  font-size: 15px;
  height: 43px;
  padding: 0 12px;
  text-align: center;
  width: 45px;
  border: 1px solid #ddd;
}
#add-to-cart-button {
  background-color: #4ab2f1;
  border: medium none;
  color: #fff;
  font-size: 15px;
  height: 43px;
  padding: 0 24px;
  text-transform: uppercase;
}
td:nth-child(2) {
  width: 100%;
}
#add-to-cart {
  white-space: nowrap;
}

<table>
  <tr>
    <td>Picture</td>
    <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</td>
    <td id="add-to-cart">
      <input id="qty-input" type="text" value="1" />
      <input id="add-to-cart-button" type="button" value="Add To Cart" />
    </td>
  </tr>
</table>