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

ほとんどの場合、あなたは 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

公開するコンテンツの前にもう1つの列を挿入してみてください。このコードを追加する <td rowspan="8" headers="secondPlace"><p>Breakfast <br/>9:10 - 9:50</p></td></tr> と、適切なcssで色を確認できます。

于 2012-06-24T14:27:38.097 に答える
0

2 番目のセルから「noDisplay」クラスを削除します

于 2009-09-10T15:29:09.953 に答える
0

その上の行に行スパンがありません。ダブル スケジュール カレンダーを作成しようとしているように見えるため、2 位 (rowspan="8") と同じ時間を 1 位に入力していないように見えます。noDisplay を .noDisplay {background-color: Purple;} に設定し、td の白い背景を取り除くと、実際に何が起こっているかがわかります。

プレビュー時: 他のみんなが言ったこと。

于 2009-09-10T15:48:35.930 に答える