iphone css display table wont allow text copy - ios

Question

I am developing a mobile web app with JQuery Mobile. I have some divs that are laid out as a table using display table, row, cell.
<div class="table detail">
<div>
<div class="detailHeadings">Expiration:</div>
<div class="detailValues">#{viewBean.expiration}</div>
</div>
<div>
<div class="detailHeadings">ID:</div>
<div>#{viewBean.Id}</div>
</div>
<div>
<div class="detailHeadings">Email:</div>
<div class="detailValues">#{viewBean.email}</div>
</div>
<div>
<div class="detailHeadings">ZIP Code:</div>
<div class="detailValues">#{viewBean.zipCode}</div>
</div>
</div>
With the following css:
.table {
display: table;
width: 100%;
color: #333333;
table-layout: fixed;
}
.table > div {
display: table-row;
}
.detail .detailValues {
text-overflow: ellipsis;
overflow: hidden;
display: table-cell;
white-space: nowrap;
}
.detailHeadings {
font-weight: bold;
padding-right: 10px;
width: 30%;
display: table-cell;
}
This works fine, however I want to be able to copy just the Id. When I do a long press on windows phone or android I can select the id just fine. However, on iOS it only allows me to select the entire table. This is a problem anytime I use display:table. Is there a way to let iOS know what I want to be able to copy?

Answer 1

Add the below to your CSS:
.table div .detailHeadings, .table div:not(:nth-child(2)) .detailHeadings + div {
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
}