CODEWITHSUNDEEP
htmlcss
Milan Kumar
Milan Kumar

Reputation: 77

Making span to take up all space and centered horizontally and vertically

I made a calendar using table, HTML of which goes as follows:

[...]
<tr>
    <td><span id = "0">00</span></td>
    <td><span id = "1">01</span></td>
    <td><span id = "2">02</span></td>
    <td><span id = "3">03</span></td>
    <td><span id = "4">04</span></td>
    <td><span id = "5">05</span></td>
    <td><span id = "6">06</span></td>
</tr>
<tr>
    <td><span id = "7">07</span></td>
    <td><span id = "8">08</span></td>
    <td><span id = "9">09</span></td>
    <td><span id = "10">10</span></td>
    <td><span id = "11">11</span></td>
    <td><span id = "12">12</span></td>
    <td><span id = "13">13</span></td>
</tr>
[...]

Now, the main point is, I want to give hovering effect on my span elements.For that I need span to take up all space of parent td and be centered horizontally and vertically. I did some googling, but nothing seems to work.I hope I made my situation clear. How to make span take up all space of td so that hovering produces desired effect, or should I use div instead of span(if that may ease my way), or there exists anyother workaround to produce hovering effect.

Thanks in advance!!

CSS:

 .cal1 .clndr span {
     color: #3a3b36;
     font-size: 15px;
     display: inline-block;
 }

 td {
     vertical-align: middle;
     border: 1px solid black;
     text-align: center;
     white-space: nowrap;
 }

Upvotes: 0

Views: 1732

Answers (2)

Sworrub Wehttam
Sworrub Wehttam

Reputation: 598

As @Deepak suggested in the comments, why not do away with the spans and use the tds instead?

As such...

<tr>
    <td>00</td>
    <td>01</td>
    <td>02</td>
    <td>03</td>
    <td>04</td>
    <td>05</td>
    <td>06</td>
</tr>

Then style them:

td:hover {
    background: #f00;
}

As for why they won't fill, spans are, by default AND your declaration (display:inline-block;) inline elements. Divs are block-level elements so you are correct in asking if this is more appropriate. Therefore you can either change the css to display: block; or use divs.

This would then be styled with width: 100%; and height: 100% to achieve your desired effect.

Edit:

Sorry, spans are display:inline; by default. Your declaration of display:inline-block already does the same as display:block in this situation. Regardless of whether display:inline-block or display:block is used, vertical-align won't work (see http://phrogz.net/css/vertical-align/) so either omit the span elements like I said or refer to DavidDomain's answer if you're okay with your cells being fixed-size.

Upvotes: 0

DavidDomain
DavidDomain

Reputation: 15303

You could inherit the height from the td element and set the spans display property to block, adding line-height as well will take care of vertical centering.

Here is an example

td {
  width: 64px;
  height: 64px;
  vertical-align: middle;
  border: 1px solid black;
  text-align: center;
  white-space: nowrap;
}

td span {
  color: #3a3b36;
  background-color: white;
  font-size: 15px;
  display: block;
  height: inherit;
  line-height: 64px;
  cursor: pointer;
  transition: all 0.4s linear;
}

td span:hover {
  background-color: red;
  color: white;
}
<table>
  <tr>
    <td><span id = "0">00</span></td>
    <td><span id = "1">01</span></td>
    <td><span id = "2">02</span></td>
    <td><span id = "3">03</span></td>
    <td><span id = "4">04</span></td>
    <td><span id = "5">05</span></td>
    <td><span id = "6">06</span></td>
  </tr>

  <tr>
    <td><span id = "7">07</span></td>
    <td><span id = "8">08</span></td>
    <td><span id = "9">09</span></td>
    <td><span id = "10">10</span></td>
    <td><span id = "11">11</span></td>
    <td><span id = "12">12</span></td>
    <td><span id = "13">13</span></td>
  </tr>
</table>

Upvotes: 2

Related Questions