如何使td / th标签固定宽度？

I am trying to create a table for a website that is a fixed width, but is fixed width based on fixed width td tags, and not the entire table having a fixed width. The need for this is because I am showing and hiding some of the columns dynamically using jQuery, and using a jQuery scrolling plugin to scroll the table as it gets wider. The problem I'm running into is that when the width of the td tags makes the table wider than its containing div, the td tags start to shrink instead of maintaining their width. So far, nothing I have done has made the td tags stay the right width. You can see a jsfiddle of what I'm dealing with here:

我正在尝试为固定宽度的网站创建一个表,但是基于固定宽度td标签的固定宽度,而不是具有固定宽度的整个表。对此的需求是因为我使用jQuery动态显示和隐藏一些列,并使用jQuery滚动插件随着它变宽而滚动表。我遇到的问题是,当td标签的宽度使表宽于其包含的div时,td标签开始收缩而不是保持其宽度。到目前为止,我所做的一切都没有让td标签保持正确的宽度。你可以在这里看到我正在处理的问题:

http://jsfiddle.net/MxE9A/1/

How do I make td tags fixed width, even when they make the table wider than its container?

如何使td标签固定宽度,即使它们使表格比容器宽?

2 个解决方案

#1

you can use max-width, and min-width in css to define the minimum and maximum width you want to your td's to reach to.

您可以使用css中的max-width和min-width来定义td要达到的最小和最大宽度。

#2

Haha, so I've never done it this way around, but here is a solution for you. Add the following:

哈哈,所以我从来没有这样做过,但这里有一个解决方案。添加以下内容:

tr {
    font-size: 0px;
    white-space: nowrap;
}
th, td {
    display: inline-block;
}

Note that this will only be IE7+ compatible, but you can use tricks to get it to display correctly as inline block in IE 7.

请注意,这只是IE7 +兼容,但您可以使用技巧使其在IE 7中正确显示为内联块。

Trick is to set them to display: inline-block so that they run off the end of the element (using white-space: nowrap).

诀窍是将它们设置为显示:inline-block,以便它们从元素的末尾运行(使用white-space:nowrap)。

#1