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コードを追加しました。過去2日からこの特定のラインと戦っています。

異なるCSSスタイルを使用してみましたが、すべてがデスクトップ画面で機能しますが、モバイル画面では見出しのみが表示されます。つまり、アカウント番号です。

Answer 1

<?=the_field('account_number')?>「account no」は見出しではなく、ただ前のセル、兄弟です。