RWD-表字體在移動設備

Question

.rwd-table { 
 

 
    margin: 1em 0; 
 
    min-width: 300px; 
 
} 
 
.rwd-table tr, th, td{ 
 
\t border: 2px solid #000000; 
 

 
} 
 
.rwd-table tr { 
 
    border-top: 1px solid #ddd; 
 
    border-bottom: 1px solid #ddd; 
 
} 
 
.rwd-table th { 
 
    display: none; 
 
} 
 
.rwd-table td { 
 
    display: block; 
 
} 
 
.rwd-table td:first-child { 
 
    padding-top: .5em; 
 
} 
 
.rwd-table td:last-child { 
 
    padding-bottom: .5em; 
 
} 
 
.rwd-table td:before { 
 
    content: attr(data-th) " "; 
 
    font-weight: bold; 
 
    width: 13.5em; 
 
    display: inline; 
 
} 
 
@media (min-width: 480px) { 
 
    .rwd-table td:before { 
 
    display: none; 
 
    } 
 
} 
 
.rwd-table th, .rwd-table td { 
 
    text-align: left; 
 
} 
 
@media (min-width: 480px) { 
 
    .rwd-table th, .rwd-table td { 
 
    display: table-cell; 
 
    padding: .25em .5em; 
 
    } 
 
    .rwd-table th:first-child, .rwd-table td:first-child { 
 
    padding-left: 0; 
 
    } 
 
    .rwd-table th:last-child, .rwd-table td:last-child { 
 
    padding-right: 0; 
 
    } 
 
} 
 

 
body { 
 

 

 

 
    text-rendering: optimizeLegibility; 
 
    color: #000000; 
 
    background: #eee; 
 
} 
 

 
h1 { 
 
    font-weight: normal; 
 
    letter-spacing: -1px; 
 
    color: #000000 !important; 
 
} 
 

 
.rwd-table { 
 
    background: #fff; 
 
    color: #000000; 
 
    border-radius: .4em; 
 
    
 
} 
 
.rwd-table tr { 
 
    border-color: #fff; 
 
} 
 
.rwd-table th, .rwd-table td { 
 
    margin: .5em 1em; 
 
} 
 
@media (min-width: 480px) { 
 
    .rwd-table th, .rwd-table td { 
 
    padding: 1em !important; 
 
\t -webkit-text-fill-color: rgba(0, 0, 0, 1); 
 
    -webkit-opacity: 1; 
 
    color: rgba(0, 0, 0, 1); 
 
    background: white; 
 
    } 
 
} 
 
.rwd-table th, .rwd-table td:before { 
 
    color: black; 
 
}

<table class="rwd-table"> 
 
\t <tr> 
 
\t \t <td colspan="2" style="text-align: center; color: black;"><?php the_field('header_note_payment'); ?></td> 
 
\t \t </tr> 
 
\t  <tr> 
 
\t \t <td bgcolor="#A8CCC9" style="color: black;">Account Name </td> 
 
\t \t <td bgcolor="" style="color: black;"><?php the_field('account_name'); ?></td> 
 
\t \t </tr> 
 
\t <tr> 
 
\t \t <td bgcolor="#A8CCC9" style="color: black;">Bank Name </td> 
 
\t \t <td bgcolor="" style="color: black;"><?php the_field('bank_name'); ?></td> 
 
\t \t </tr> 
 

 
\t <tr> 
 
\t \t <td bgcolor="#A8CCC9" style="color: black;">Branch Code</td> 
 
\t \t <td bgcolor="" style="color: black;"><?php the_field('branch_code'); ?></td> 
 
\t \t </tr> 
 

 
\t \t <tr> 
 
\t \t <td bgcolor="#A8CCC9" style="color: black;">Account No</td> 
 
\t \t <td bgcolor="" style="color: black;"><?php the_field('account_number'); ?></td> 
 
\t \t </tr> 
 

 
\t \t <tr> 
 
\t \t <td bgcolor="#A8CCC9" style="color: black;">IBAN</td> 
 
\t \t <td bgcolor="" style="color: black;"><?php the_field('iban'); ?></td> 
 
\t \t </tr> 
 

 
\t \t <tr> 
 
\t \t <td bgcolor="#A8CCC9" style="color: black;">Currency</td> 
 
\t \t <td bgcolor="" style="color: black;"><?php the_field('currency'); ?></td> 
 
\t \t </tr> 
 

 
\t \t <tr> 
 
\t \t <td bgcolor="#A8CCC9" style="color: black;">SWIFT Code</td> 
 
\t \t <td bgcolor="" style="color: black;"><?php the_field('swift_code'); ?></td> 
 
\t \t </tr> 
 

 
\t \t <tr> 
 
\t \t <td bgcolor="#A8CCC9" style="color: black;">Bank Address</td> 
 
\t \t <td bgcolor="" style="color: black;"><?php the_field('bank_address'); ?></td> 
 
\t \t </tr> 
 

 
\t \t <tr style="text-align: center; color: black;"> 
 
\t \t \t <td colspan="2"><?php the_field('footer_note_payment'); ?></td> 
 
\t \t </tr> 
 

 
\t </table>

<table class="rwd-table"> 
<tr> 
    <td colspan="2" style="text-align: center; color: black;"><?php the_field('header_note_payment'); ?></td> 
    </tr> 
    <tr> 
    <td bgcolor="#A8CCC9" style="color: black;">Account Name </td> 
    <td bgcolor="" style="color: black;"><?php the_field('account_name'); ?></td> 
    </tr> 
    <tr> 
    <td bgcolor="#A8CCC9" style="color: black;">Bank Name </td> 
    <td bgcolor="" style="color: black;"><?php the_field('bank_name'); ?></td> 
    </tr> 

    <tr> 
    <td bgcolor="#A8CCC9" style="color: black;">Branch Code</td> 
    <td bgcolor="" style="color: black;"><?php the_field('branch_code'); ?></td> 
    </tr> 

    <tr> 
    <td bgcolor="#A8CCC9" style="color: black;">Account No</td> 
    <td bgcolor="" style=" color: rgba(0, 0, 0, 1) !important;">011 650 777 003</td> 
    </tr> 

    <tr> 
    <td bgcolor="#A8CCC9" style="color: black;">IBAN</td> 
    <td bgcolor="" style="color: black;"><?php the_field('iban'); ?></td> 
    </tr> 

    <tr> 
    <td bgcolor="#A8CCC9" style="color: black;">Currency</td> 
    <td bgcolor="" style="color: black;"><?php the_field('currency'); ?></td> 
    </tr> 

    <tr> 
    <td bgcolor="#A8CCC9" style="color: black;">SWIFT Code</td> 
    <td bgcolor="" style="color: black;"><?php the_field('swift_code'); ?></td> 
    </tr> 

    <tr> 
    <td bgcolor="#A8CCC9" style="color: black;">Bank Address</td> 
    <td bgcolor="" style="color: black;"><?php the_field('bank_address'); ?></td> 
    </tr> 

    <tr style="text-align: center; color: black;"> 
     <td colspan="2"><?php the_field('footer_note_payment'); ?></td> 
    </tr> 

</table> 

我加入CSS代碼& HTML代碼，以及不可見的，請告訴我確切地知道我要去的地方錯了。與過去兩天的這條特定路線作鬥爭。

嘗試使用不同的css風格，但是，一切工作在桌面屏幕上，但在移動屏幕上，只有標題顯示，即帳戶號碼。

Answer 1

不應該是<?=the_field('account_number')?>順便說一句，'賬號'不是標題 - 它只是前一個單元格，兄弟姐妹。