CODEWITHSUNDEEP
htmlcsshtml-table
synaptik
synaptik

Reputation: 9519

Pop-up text over table heading: make <SPAN> display centered and above <TH>

The headings of my table are abbreviated dates. I want to pop up the full date directly above the abbreviated date when I hover over the abbreviated date.

Here is an example <th>:

<th class="dateHeading">Jun 01<span class="fullDate">Wednesday (06-01-2016)</span></th>

I'm using the following CSS to position and display the <span> above the <th>:

th.dateHeading {
  word-spacing: 9999999px; /* force one word per line (stacking) */
  font-size: 70%;
  font-weight: normal;
  cursor: crosshair;
}

th.dateHeading:hover .fullDate {
  display: block;
}

.fullDate {
  display: none;
  position: absolute;
  z-index: 1000;
  background: #C8C8C8;
  width: 100px;
  padding: 5px;
  font-size: 120%;
  transform: translate(0, -70px);
  -webkit-transform: translate(0, -70px);
  -o-transform: translate(0, -70px);
  -moz-transform: translate(0, -70px);
}

The problem is that the <span> is not horizontally centered with the corresponding <th>. How can I center it?

Fiddle

Upvotes: 0

Views: 415

Answers (4)

Rohit
Rohit

Reputation: 1802

Remove your transform code, Just play with positions, check below:

table {
  margin-top: 50px;
}

th,
td {
  width: 30px;
}

th.tableHeading {
  font-weight: bold;
  font-size: 150%;
  text-align: left;
 
}

th.dateHeading {
  word-spacing: 9999999px;
  /* force one word per line */
  font-size: 70%;
  font-weight: normal;
  cursor: crosshair;
   position: relative;
}

th.dateHeading:hover .fullDate {
  display: block;
}

.fullDate {
  display: none;
  position: absolute;
  top: -45px;
  left: -33px;
  z-index: 1000;
  background: #C8C8C8;
  width: 100px;
  padding: 5px;
  font-size: 120%;
}

.green {
  background-color: #388C43;
  width: 20px;
}

.red {
  background-color: #B22222;
  width: 20px;
}

.rowName {
  width: 100px;
}
<table>
  <thead>
    <tr>
      <th class="tableHeading">My Table</th>
      <th class="dateHeading">Jun 01<span class="fullDate">Wednesday (06-01-2016)</span></th>
      <th class="dateHeading">Jun 16<span class="fullDate">Thursday (06-16-2016)</span></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="rowName">A</td>
      <td class="red">&nbsp;</td>
      <td class="red">&nbsp;</td>
    </tr>
    <tr>
      <td class="rowName">B</td>
      <td class="red">&nbsp;</td>
      <td class="red">&nbsp;</td>
    </tr>
  </tbody>
</table>

Upvotes: 1

dippas
dippas

Reputation: 60573

you need to set position: relative to parent th and in your span you may remove the width (optional here) working with padding, and you have add left for position:absolute

Note that this will align the box itself and not the text inside to the shortened date

table {
  margin-top: 50px;
}
th,
td {
  width: 30px;
}
th.tableHeading {
  font-weight: bold;
  font-size: 150%;
  text-align: left;
  transform: translate(0, -20px);
  -webkit-transform: translate(0, -20px);
  -o-transform: translate(0, -20px);
  -moz-transform: translate(0, -20px);
}
th.dateHeading {
  word-spacing: 9999999px;
  /* force one word per line */
  font-size: 70%;
  font-weight: normal;
  cursor: crosshair;
  position: relative
}
th.dateHeading:hover .fullDate {
  display: block;
}
.fullDate {
  display: none;
  position: absolute;
  left: -40px;
  z-index: 1000;
  background: #C8C8C8;
  padding: 5px 15px;
  font-size: 120%;
  transform: translate(0, -70px);
  -webkit-transform: translate(0, -70px);
  -o-transform: translate(0, -70px);
  -moz-transform: translate(0, -70px);
}
.green {
  background-color: #388C43;
  width: 20px;
}
.red {
  background-color: #B22222;
  width: 20px;
}
.rowName {
  width: 100px;
}
<table>
  <thead>
    <tr>
      <th class="tableHeading">My Table</th>
      <th class="dateHeading">Jun 01<span class="fullDate">Wednesday (06-01-2016)</span>
      </th>
      <th class="dateHeading">Jun 16<span class="fullDate">Thursday (06-16-2016)</span>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="rowName">A</td>
      <td class="red">&nbsp;</td>
      <td class="red">&nbsp;</td>
    </tr>
    <tr>
      <td class="rowName">B</td>
      <td class="red">&nbsp;</td>
      <td class="red">&nbsp;</td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Hamilton Lucas
Hamilton Lucas

Reputation: 419

I set the parent container (dateHeading) to be position: relative, and then set the date flyout (fullDate) to be position:absolute. This will position the flyout relative to it's parent.

I then specified the left: attribute of fullDate to be -100%, so it will center it.

See the fiddle.

.fullDate {
  display: none;
  z-index: 1000;
  background: #C8C8C8;
  width: 100px;
  padding: 5px;
  font-size: 120%;
  position: absolute;
  top:-40px;
  left: -100%;
}

Upvotes: 1

Hunter Turner
Hunter Turner

Reputation: 6894

The method below should center the full date horizontally above your abbreviated date.
Add the following to your CSS:

th.dateHeading {
  position: relative;
}

.fullDate {
  left: -9999px;
  right: -9999px;
  margin: auto;
}


table {
  margin-top: 50px;
}

th,
td {
  width: 30px;
}

th.tableHeading {
  font-weight: bold;
  font-size: 150%;
  text-align: left;
  transform: translate(0, -20px);
  -webkit-transform: translate(0, -20px);
  -o-transform: translate(0, -20px);
  -moz-transform: translate(0, -20px);
}

th.dateHeading {
  word-spacing: 9999999px;
  /* force one word per line */
  font-size: 70%;
  font-weight: normal;
  cursor: crosshair;
  position: relative;
}

th.dateHeading:hover .fullDate {
  display: block;
}

.fullDate {
  display: none;
  left: -9999px;
  right: -9999px;
  margin: auto;
  position: absolute;
  z-index: 1000;
  background: #C8C8C8;
  width: 100px;
  padding: 5px;
  font-size: 120%;
  transform: translate(0, -70px);
  -webkit-transform: translate(0, -70px);
  -o-transform: translate(0, -70px);
  -moz-transform: translate(0, -70px);
}

.green {
  background-color: #388C43;
  width: 20px;
}

.red {
  background-color: #B22222;
  width: 20px;
}

.rowName {
  width: 100px;
}
<table>
  <thead>
    <tr>
      <th class="tableHeading">My Table</th>
      <th class="dateHeading">Jun 01<span class="fullDate">Wednesday (06-01-2016)</span></th>
      <th class="dateHeading">Jun 16<span class="fullDate">Thursday (06-16-2016)</span></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="rowName">A</td>
      <td class="red">&nbsp;</td>
      <td class="red">&nbsp;</td>
    </tr>
    <tr>
      <td class="rowName">B</td>
      <td class="red">&nbsp;</td>
      <td class="red">&nbsp;</td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Related Questions