CSS：当浏览器大小减小时，如何强制表格单元格中的内容保持在一行上

Question

我有一个包含两个按钮的列的表。当浏览器缩小尺寸时，包含这两个按钮的列（即td）会中断。有谁知道如何使用CSS防止这种情况发生？换句话说，强制两个按钮保持彼此相邻？

我尝试了以下内容并且都失败了：

1. 在td上放置以像素为单位的宽度
2. white-space：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;
}

Answer 2

我认为浏览器不知道该怎么做，因为没有足够的空间来容纳所有东西。从逻辑上讲，你必须要么使数字变得更小，要么包括更少的数字，屏幕尺寸越小（或使按钮本身逐渐变小，这不是一个好的选择）。