html - CSS:当浏览器尺寸减小时，如何强制表格单元格中的内容保持在一行

Question

我有一个表，其中有一列包含两个按钮。当浏览器尺寸缩小时，包含这两个按钮的列(即 td)会中断。有谁知道如何使用 CSS 防止这种情况发生？换句话说，强制两个按钮并排放置？

我已经尝试了以下但都失败了:

1. 在 td 上设置以像素为单位的宽度
2. 空白:nowrap

这是 html:

<table>      
   <tr>
      <!-- several other tds before this one -->
      <td>
         <a class="sg-icon sg-i-ok"></a>
         <button class="k-button sg-grid-filter-clear-button" ng-click="clearFilterValues()">x</button>
     </td>
   </tr>
</table>

这是来自 Chrome 的样式:

Answer 1

包装<a>和 <button>在包含<div>并给它一个固定的宽度:

DEMO

<td>
     <div class="fixed_width">
         <a class="sg-icon sg-i-ok"><img src="http://placehold.it/30x30"></a>
         <button class="k-button sg-grid-filter-clear-button" ng-click="clearFilterValues()">x</button>
     </div>
 </td>

---

.fixed_width {
    width: 80px;
}