0

css を使用したレスポンシブ テーブルがあります。リンクは、iPhone を含むすべてのデバイスで正常に機能しますが、iPad では機能しません。修正を検索しましたが、jquery の修正しか見つかりません。どんな助けでも感謝します。

CSS:

/* General Table Style */

table.responsivetable {
border-collapse: collapse;
    width: 97%;
margin-left: 1.5%;
margin-bottom: 10px;
}

th { 
 background-color: #9eafd5;
color: #0c0065;
font-family: 'Alegreya SC', Palatino, serif;
font-weight: 700;
}

tr:nth-of-type(odd) { 
background: #d3dbec; 
}

.responsivetable td, .responsivetable th {
padding: 6px;
border: 1px solid #0c0065;
text-align: left;
}

/* Make Table Responsive --- */
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width:     1024px)  {

.responsivetable table, .responsivetable thead, .responsivetable th, .responsivetable tr, .responsivetable td {display: block;
}

/* Hide table headers (but not display:none, for accessibility) */
.responsivetable thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}

.responsivetable tr {
border: 1px solid #0c0065;
}

.responsivetable td {
/* Behave like a row */
border: none;
padding-left: 30%;
border-bottom: 1px solid #0c0065;
position: relative;
}

.responsivetable td:before {
/* Now, like a table header */
position: absolute;
/* Top / left values mimic padding */
top: 6px; left: 10px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
font-family: 'Alegreya SC', Palatino, serif;
font-weight: 700;
}

/* -- LABEL THE DATA -- */

.responsivetable td:nth-of-type(1):before { content: "Title"; }

.responsivetable td:nth-of-type(2):before { content: "Name"; }

.responsivetable td:nth-of-type(3):before { content: "Email"; }


}
/* End responsive query */
#TableBound a:link  {
color: #4162af;
text-decoration: underline;
}
</style>

HTML:

<div id="main"><h1>Attorneys</h1>
<div id="TableBound">
<table class="responsivetable" border="0">
<thead>
<tr>
<th>Title</th>
<th>Name</th>
<th>Email</th>

</tr>
</thead>
<tbody>
<tr>
<td class="titleBold lightblue">Partner</td>
<td><a href="bio-Howard.html">Joseph C. Howard, Jr.</a></td>
<td><a href="mailto:jhoward@hrmrlaw.com">jhoward@hrmrlaw.com</a></td>

</tr>
<tr>
<td class="titleBold">Partner</td>
<td><a href="bio-Rome.html">Henry D. Rome</a></td>
<td><a href="mailto:hrome@hrmrlaw.com">hrome@hrmrlaw.com</a></td>
</tr>

リンクが機能しないのはテーブルであることはわかっています。テーブルなしでリンクを作成すると、リンクは正常に機能します。

誰でも回避策や解決策を提案できますか?

4

2 に答える 2

0

position: relative; の場合、犯人を見つけました。(.responsive td css で) iPad ではリンクをクリックできません。

私の解決策：

.responsivetable td {
/* Behave like a row */
border: none;
border-bottom: 1px solid #0c0065;
}

.responsivetable td:before {
/* Now, like a table header */
position: relative;
/* Top / left values mimic padding */
left: 10px;
width: 45%;
padding-right: 25px;
white-space: nowrap;
font-family: 'Alegreya SC', Palatino, serif;
font-weight: 700;
}
于 2013-08-27T21:32:35.873 に答える