如何在 HTML 或 CSS 中指定表格单元格的绝对最小宽度 [英] How do I specify in HTML or CSS the absolute minimum width of a table cell

问题描述

确保表格单元格不能小于某个最小宽度的最佳方法是什么.

What's the best way to ensure a table cell cannot be less than a certain minimum width.

我想确保表格中的所有单元格的宽度至少是表格容器宽度的 100 像素.如果有更多可用空间，表格单元格应填满该空间.

I want to ensure that all cells in a table are at least 100px wide regards of the width of the tables container. If there is more available space the table cells should fill that space.

我可能想找到一个适用的解决方案

I possible I would like to find a solution that works in

• IE 6-8
• FF 2-3
• Safari

按喜好顺序.

推荐答案

这个 CSS 应该足够了:

This CSS should suffice:

td { min-width: 100px; }

然而，并非所有浏览器都能正确遵守它(min-width 属性)(例如，IE6 非常不喜欢它).

However, it's not always obeyed correctly (the min-width attribute) by all browsers (for example, IE6 dislikes it a great deal).

至于 IE6(及之前的)解决方案，据我所知，没有一种在所有情况下都能可靠运行.使用 nowrap HTML 属性并不能真正达到预期的结果，因为这只是防止单元格中的换行符，而不是指定最小宽度.

As for an IE6 (and before) solution, there isn't one that works reliably under all circumstances, as far as I know. Using the nowrap HTML attribute doesn't really achieve the desired result, as that just prevents line-breaks in the cell, rather than specifying a minimum width.

但是，如果 nowrap 与常规单元格宽度属性一起使用(例如使用 width: 100px)，100px 将类似于最小宽度，并且单元格仍将随文本一起扩展(由于 nowrap).这是一个不太理想的解决方案，不能使用 CSS 完全应用它，因此，如果您有许多要应用它的表，实现起来会很乏味.(当然，如果您想在单元格中使用动态换行符，无论如何，整个替代解决方案都会失败.

However, if nowrap is used in conjunction with a regular cell width property (such as using width: 100px), the 100px will act like a minimum width and the cell will still expand with the text (due to the nowrap). This is a less-than-ideal solution, which cannot be fully applied using CSS and, as such, would be tedious to implement if you have many tables you wish to apply this to. (Of course, this entire alternative solution falls down if you want to have dynamic line-breaks in your cells, anyway).

这篇关于如何在 HTML 或 CSS 中指定表格单元格的绝对最小宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！