Question

我桌子的标题是缩写日期。当我将鼠标悬停在缩位日期上时，我想在缩写日期的正上方弹出完整日期。

以下是<th>示例：

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

我使用以下CSS定位并显示<span>上方的<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);
}

问题是<span>没有与相应的<th>水平居中。我该如何居中呢？

Fiddle

Answer 1

以下方法应将整个日期居中放在缩写日期的上方。
将以下内容添加到CSS中：

th.dateHeading {
  position: relative;
}

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

我将父容器（dateHeading）设置为position：relative，然后将日期flyout（fullDate）设置为position：absolute。这将弹出相对于它的父级。

然后我将fullDate的left：属性指定为-100％，因此它将居中。

请参阅the fiddle。

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

Answer 3

您需要将position: relative设置为父th，并且在您的span中，您可以删除与width一起使用的padding（此处为可选），然后您为left

添加position:absolute

请注意，这会将框本身而不是内部文本与缩短日期对齐

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 4

删除您的转化代码，只需玩位置，请查看以下内容：

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>

在表格标题上弹出文本：使<span>显示居中及以上

4 个答案: