rwd-table Font not visible in Mobile devices - php

Question

.rwd-table {
margin: 1em 0;
min-width: 300px;
}
.rwd-table tr, th, td{
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;
-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">
<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: black;"><?php the_field( 'account_number' ); ?></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>
<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>
I have added css code & html code as well, please do let me know where exactly i am going wrong. fighting with this particular line from past two days.
Tried using different css style but, everything works on the desktop screens, but in the mobile screen, only Heading gets displayed i.e. ACCOUNT NUMBER.

Answer 1

Shouldn't it be <?=the_field('account_number')?> BTW, 'account no' isn't the heading - its just the previous cell, a sibling.