響應式HTML表格鏈接不能在iPad上工作

Question

我有一個使用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> 

我知道它是阻止鏈接到工作中，我創建沒有他們正常工作表中的鏈接時，該表。

任何人都可以提出一個解決方法嗎？

Answer 1

我發現的罪魁禍首，當位置：相對; （在響應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; 
}