CODEWITHSUNDEEP
htmlcsscss-tablestabular
Sergio del Amo
Sergio del Amo

Reputation: 78126

Align a HTML table Cell to a column

I would like to align a table cell to a column where it belongs: 

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

But what i get is the next: 

 _________________________________________   

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

The html code / css I am using is the next. Any idea how to achieve the above effect by teaking my HTML or CSS is really welcome.

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>

It would be great to hear from a CSS solution!

Upvotes: 1

Views: 2460

Answers (5)

Rajeev Kumar
Rajeev Kumar

Reputation: 441

Try to insert one more column before the content you publishshing and add this code may be work out <td rowspan="8" headers="secondPlace"><p>Breakfast <br/>9:10 - 9:50</p></td></tr> you can check out the colours with proper css.

Upvotes: 0

mister scratch
mister scratch

Reputation:

You are missing a rowspan on the row above it. Since it looks like you are trying to make a double schedule calendar what it looks like is that you didn't fill in the same amount of time in First Place as you did in Second place (rowspan="8"). Setting noDisplay to .noDisplay {background-color: purple;} and getting rid of the white background on the td really shows what is going on.

On preview: What everyone else said.

Upvotes: 0

Donut
Donut

Reputation: 112895

Change this line:

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

to this:

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

Adds an extra <td> element to fix the alignment issues. You might want to set background-color: rgb(221, 221, 221); on the added cell; since there's no content you probably don't want the white background.

Upvotes: 2

TheVillageIdiot
TheVillageIdiot

Reputation: 40537

Most probably you are one td short! Insert empty <td></td> and it solves the problem.

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

Upvotes: 1

Dimi Takis
Dimi Takis

Reputation: 4959

Remove the "noDisplay" class from the 2nd cell

Upvotes: 0

Related Questions