Question

我想将表格单元格与其所属的列对齐：

_________________________________________
|       |    First Place |  Second Place |
|       |                |               |
_________________________________________
| 09:00 |                | Break fast    |
|       |                | 09:10 : 09:50 |
_________________________________________

但我得到的是下一个：

 _________________________________________   

 |       |    First Place |  Second Place |
 |       |                |               |
  _________________________________________
 | 09:00 | Break fast     |               |
 |       | 09:10 : 09:50  |               |
 _________________________________________

我正在使用的html代码/ css是下一个。任何想法如何通过伪造我的HTML或CSS来实现上述效果是非常受欢迎的。

table.dayEvent {
  background-color: rgb(221, 221, 221);
  border-collapse: separate;
  display: table;
  margin: 0px 0px 20px 0px;
  width: 570px;
}
table.dayEvent caption {
  color: rgb(46, 63, 153);
  font-size: 18px;
  text-transform: uppercase;
  font-weight: bold;
  margin: 10px 0px;
  text-align: left;
}
table.dayEvent thead {
  border-color: inherit;
  display: table-header-group;
  vertical-align: middle;
}
table.dayEvent tr {
  vertical-align: top;
}
table.dayEvent th {
  background: rgb(238, 238, 238);
  padding: 10px;
  text-align: left;
  font-weight: bold;
}
.noDisplay {
  display: none;
}
table.dayEvent td {
  background: white;
  padding: 10px;
}
table.dayEvent td p {
  padding: 20px;
  font-size: 14px;
  line-height: 20px;
}

<table class="dayEvent">
  <thead>
    <tr>
      <th></th>
      <th axis="location" id="firstPlace">FirstPlace</th>
      <th axis="location" id="secondPlace">FirstPlace</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th axis="T09:00" rowspan="12">09:00</th>
    </tr>
    <tr>
      <td class="noDisplay">&nbsp;</td>
    </tr>
    <tr>
      <td rowspan="8" headers="secondPlace">
        <p>Breakfast 9:10 - 9:50</p>
      </td>
    </tr>
    <tr>
      <td class="noDisplay">&nbsp;</td>
    </tr>
    <tr>
      <td class="noDisplay">&nbsp;</td>
    </tr>
    <tr>
      <td class="noDisplay">&nbsp;</td>
    </tr>
    <tr>
      <td class="noDisplay">&nbsp;</td>
    </tr>
    <tr>
      <td class="noDisplay">&nbsp;</td>
    </tr>
    <tr>
      <td class="noDisplay">&nbsp;</td>
    </tr>
    <tr>
      <td class="noDisplay">&nbsp;</td>
    </tr>
    <tr>
      <td class="noDisplay">&nbsp;</td>
    </tr>
    <tr>
      <td class="noDisplay">&nbsp;</td>
    </tr>
  </tbody>
</table>

听听CSS解决方案会很棒！

Answer 1

更改此行：

<tr><td rowspan="8" headers="secondPlace"><p>Breakfast 9:10 - 9:50</p></td></tr>

到此：

<tr><td rowspan="8"></td><td rowspan="8" headers="secondPlace"><p>Breakfast 9:10 - 9:50</p></td></tr>

添加额外的<td>元素以修复对齐问题。您可能希望在添加的单元格上设置background-color: rgb(221, 221, 221);;因为没有内容你可能不想要白色背景。

Answer 2

很可能你只有一个td短！插入空<td></td>并解决问题。

<tr>
  <td></td>
  <td rowspan="8" headers="secondPlace"><p>Breakfast 9:10 - 9:50</p></td>
</tr>

Answer 3

从第二个单元格中删除“noDisplay”类

Answer 4

您在其上方的行上缺少行数。因为看起来你正在尝试制作一个双重计划日历，所以你在First Place中填写的时间与第二名（rowspan =“8”）相同。将noDisplay设置为.noDisplay {background-color：purple;}并摆脱td上的白色背景确实显示了正在发生的事情。

预览：其他人都说了什么。

Answer 5

尝试在您发布的内容之前再插入一列，并添加此代码可能会解决 <td rowspan="8" headers="secondPlace"><p>Breakfast <br/>9:10 - 9:50</p></td></tr> 你可以用适当的CSS检查颜色。

将HTML表格单元格与列对齐

5 个答案: