rwd-table字体在移动设备中不可见

时间:2017-10-08 08:40:37

标签: php html css wordpress

.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>

我添加了css代码&amp; HTML代码,请让我知道我哪里错了。过去两天与这条特殊的战线作战。

尝试使用不同的css样式但是,一切都在桌面屏幕上运行,但在移动设备屏幕上,只显示标题,即帐号。

1 个答案:

答案 0 :(得分:0)

不应该是<?=the_field('account_number')?> BTW,'帐户号'不是标题 - 它只是前一个单元格,一个兄弟。