iphone css display table wont allow text copy

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; 
}