Question

以下屏幕截图显示了一个jquery ui datepicker，直到最近才正确显示：

Table overflows

与有问题的表关联的类是ui-datepicker-calendar，它嵌套在ui-datepicker中。我可以在chrome中检查这个元素并看到它的宽度为100％，错误地赋予了617px的宽度，超过了其父级的217px宽度。

我承认我对CSS缺乏经验，但我认为我可以通过使用以下代码段来覆盖该样式：

.ui-datepicker-calendar
{
width: 217px !important;
}

我已经在Stack Overflow的其他问题中看到了这项工作，但是我一直无法用上述类似的解决方案修复这个特定的bug。任何想法都受到热烈欢迎。

修改

代码：

HTML：

<div id="container">
    <br />
    <!--This div will be dynamically loaded based on the selected tab-->
    <div id="dataDisplay">
    <!-- Section table is loaded here -->
    </div>

    <!--This div will be dynamically loaded based on the selected tab-->
    <div id="mainBody">
    <!--Date picker is loaded here -->
    </div>
</div>

在CSS中：

#sectionTable th, td{
    border-collapse:collapse;
    background-color:#EEE;
    border:2px solid #39F;
    min-width:80px; 
    width:97%;
}

罪魁祸首在sectionTable的上述CSS条目中。在另一个div中定义此表格的宽度会导致上述屏幕截图中的症状为Mystere Man指出。

对于遇到此问题的其他任何人，请查看以下用于CSS语法和选择器的资源，以便更好地保存您的CSS文件。

Answer 1

很可能，你有一些超越这个风格。寻找有宽度的th或td风格。你可能会以某种方式绊倒特殊性问题。

Answer 2

在我的情况下，罪魁祸首是以下代码设置表min-width：

table {
border-collapse: collapse;
width: 100%;
word-wrap: break-word;
/*min-width:960px;*/
}

jQuery ui-datepicker的日历表宽度溢出ui-datepicker

2 个答案: