0

次のように定義されたテーブルがあります。

<table role="grid" style="height: auto;"><colgroup><col style="width:200px">


<tr data-uid="5b6a6a00-3dc5-44bd-b2a4-f7a04879385c" role="row" style="outline: 1px solid rgba(0, 0, 0, 0.15);">
<td role="gridcell"><span>795368339</span><span class="NoType" begin="338" end="348"> AMANULLAH</span><span class="PhoneNumber" begin="329" end="338" style="background-color: rgb(144, 238, 144);" data-original-title=""></span>
</td>
</tr>
</tbody>
</table>

フィドルはhttp://jsfiddle.net/m7JLJ/にあります

セルの名前または電話番号の上にデータを表示する必要があります。切り替える必要があります。

CSSを使用してどのように行うことができますか？

jQuery を使用して切り替えることができますが、データの上にデータを表示するのが困難です。セルで

4

1 に答える 1

0

td (データ ホルダー セル) では、'position:relative;' を適用します。スパン (データ自体) に対して適切に「position:absolute;」

jquery を介してそれらを切り替えることができます。

しかし今、td の高さは 0 になるので、以下に示すようにデータの前に空のスパンを追加することをお勧めします。

HTML:

<td class="Holder">
    <span class="Filler"></span>
    <span class="Phone">01234567</span>
    <span class="OtherData">my name is</span>
</td>

CSS

.Holder
{
    position: relative;
}
.Phone, .OtherData
{
    position: absolute;
}
.Filler
{
    height: 100%;
    display: inline-block;
}
于 2013-08-27T21:07:59.093 に答える