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

【问题标题】：jQuery ui-datepicker's calendar table width overflows ui-datepickerjQuery ui-datepicker 的日历表宽度溢出 ui-datepicker
【发布时间】：2011-11-07 21:44:26
【问题描述】：

以下屏幕截图显示了一个 jquery ui 日期选择器，直到最近，它都可以正确显示：

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

我承认我对 CSS 缺乏经验，但我认为我可以通过使用以下 sn-p 来覆盖样式：

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

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

编辑：

代码：

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 条目中。正如 Mystere Man 指出的那样，在另一个 div 中定义此表的宽度会导致上述屏幕截图中的症状。

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

【问题讨论】：

在宽度的末尾添加一个分号：217px !important;并删除 ! 之间的空格。和重要的
拥有更好的语法可能总体上对我有好处，但不幸的是这个错误并没有让步。不过，我会更新问题以反映此建议。

标签： jquery css jquery-ui datepicker jquery-ui-datepicker

【解决方案1】：

很可能，您有某种风格可以超越这一点。寻找带有宽度的 th 或 td 样式。您可能会因特定性问题而绊倒。

【讨论】：

你是绝对正确的。我有条不紊地浏览了我的 CSS 文件并一点一点地注释掉了每个条目，这是一种引用 th 和 td 的样式。我不太明白为什么它会覆盖它。我希望我能早点注意到你的评论，哈哈

【解决方案2】：

在我的例子中，罪魁祸首是以下设置表格最小宽度的代码：

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

【讨论】：