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

我找到了罪魁祸首，当位置：相对; （在.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;
}

Answer 2

还有另一种方法可以使它通过flex响应

.table-res{
        td {
            border: none;
            border-bottom: 1px solid #eee;
            position: relative;
            word-break: break-all;
            display: flex;
        }
        td:before {
            position: relative;
            width: 54%;
            white-space: nowrap;
        }
}

响应式html表链接无法在iPad上运行

2 个答案: