react-big- calendar 表 TD 与表和 TD 重叠答案

【问题标题】：react-big- calendar Table TD overlapping outside Table and TDreact-big- calendar 表 TD 与表和 TD 重叠
【发布时间】：2020-03-20 17:50:57
【问题描述】：

我在包含 tbody、tr 和 td 的表中使用 react-big-calendar。当日历月中有数据时，react-big-calendar 适合页面和面板内部。但是，当我将事件添加到日历中时，它会在表格、tr、面板上重叠。右侧展开，我必须使用水平滚动条才能看到最右侧。

我还尝试了以下方法，它有助于使日历适合，但它对宽度进行了硬编码，我喜欢根据浏览器宽度调整日历的大小。

样式（{高度：“100vh”，宽度：“100vh”}）

width;"100%" 不起作用。

非常感谢任何帮助。

我需要它保持在桌子内。

<table className={myStyle.myTableStyle}>
 <tbody>
   <tr>
    <td width=98% className={myStyle.myPanel}>
      <Calendar 
        className="myCalendar"
        selectable={true}
        localizer={myLocalizer}
        defaultView="month"
        events={myEvents}
        style({height: "100vh"})
        popup={true}
      />
    </td>
   </tr>
 </tbody>
</table>

【问题讨论】：

您需要更新您的问题以包含 CSS，以便其他人可以复制它。还有<td=98%是什么？
ps：你删除的邮件stackoverflow.com/questions/65306858/…try -> props["aria-label"] =.. 希望你永远不会因为那个垃圾邮件发送者而删除..

标签： html css reactjs react-big-calendar

【解决方案1】：

添加到css中的表格样式

.tableStyle 表格布局：固定宽度：100%

这样可以防止表格跑出页面

【讨论】：