1

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

_________________________________________
|       |    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 解决方案的消息！

4

5 回答 5

2

更改此行：

<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);在添加的单元格上进行设置；因为没有内容，你可能不想要白色背景。

于 2009-09-10T15:31:48.060 回答
1

很可能你是个td矮人！插入空<td></td>，它解决了问题。

<tr>
  <td></td>
  <td rowspan="8" headers="secondPlace"><p>Breakfast 9:10 - 9:50</p></td>
</tr>
于 2009-09-10T15:33:18.330 回答
0

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

于 2012-06-24T14:27:38.097 回答
0

您在其上方的行上缺少一个行跨度。由于看起来您正在尝试制作双日程日历，因此看起来您在第一名中填写的时间与在第二名中填写的时间不同（rowspan =“8”）。将 noDisplay 设置为 .noDisplay {background-color: Purple;} 并摆脱 td 上的白色背景确实显示了正在发生的事情。

预览：其他人所说的。

于 2009-09-10T15:48:35.930 回答
0

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

于 2009-09-10T15:29:09.953 回答