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

【问题标题】：CSS: how do I force contents in a table cell to stay on one line when browser size reducedCSS：当浏览器尺寸减小时，如何强制表格单元格中的内容保持在一行
【发布时间】：2014-03-28 22:35:59
【问题描述】：

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

我尝试了以下方法，但都失败了：

在 td 上放置一个以像素为单位的宽度
空白：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 的样式：

【问题讨论】：

图像很棒，但我们需要代码（html 和 CSS）甚至更好：fiddle 才能正确回答。
好的，谢谢刚刚用一些代码更新了问题
给表格一个宽度，以像素为单位，如果你给它一个百分比宽度，它总是会调整到那个宽度，然后相应地调整单元格的宽度
将<a> 和button 包裹在div 中并给它一个固定的wih
@Tone 你可以在表格中添加一个以像素为单位的最小宽度，这样它就不会低于单元格在一行上所需的宽度，但会在需要时扩展

标签： html css

【解决方案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;
}

【讨论】：

@Tone 我以为你在上面的评论中说过“不幸的是我不能以像素为单位指定宽度，我的老板不允许”

【解决方案2】：

我认为浏览器不知道在这里做什么，因为没有足够的空间容纳所有内容。从逻辑上讲，您必须使数字逐渐变小，或者屏幕尺寸越小包含的数字越少（或者使按钮本身逐渐变小，这不是一个好的选择）。

【讨论】：