如何在表格 td 单元格中有两个 <p> 元素不影响单元格的大小?

问题描述 投票:0回答:1
javascript html css
1个回答
0
投票

在将

<p>
元素添加到日历中的特定日期时保持单元格宽度一致的一种方法是为
<td>
元素设置固定宽度。您可以通过为具有固定宽度的
<td>
元素添加 CSS 规则并将
box-sizing
属性设置为
border-box
以在指定宽度内包含填充来实现此目的。

例如,您可以添加以下CSS规则来将

<td>
元素的宽度设置为
100px

td {
  border: 1px solid #ddd;
  height: 200px;
  vertical-align: top;
  padding: 5px;
  width: 100px;
  box-sizing: border-box;
}

这将确保所有单元格具有相同的宽度,无论它们是否包含

<p>
元素。您可以调整宽度值以适合您想要的单元格大小。

然后,要将

<p>
元素添加到日历中的特定日期,您可以将其添加到相应的
<td>
元素中。

例如:

<td>
  <span>1</span>
  <p>Dinner Party</p>
</td>

可以使用

<span>
元素来显示日期,可以在其下方添加
<p>
元素来显示晚宴活动等附加信息

通过在

<p>
元素内添加
<td>
元素,单元格的宽度将保持一致,并且
<p>
元素将位于日期值下方。您可以使用 CSS 调整
<p>
元素的位置,例如设置
text-align
属性使文本水平居中,设置 line-height 属性调整垂直对齐方式。

© www.soinside.com 2019 - 2024. All rights reserved.