About Us UI fix

src/pages/AboutUs/AboutUs_cn.js

@@ -37,6 +37,21 @@ const AboutUs = () => {
 						padding: 8px;
 					}
 				}
+				table.contactus {
+					font - family: arial, sans-serif;
+					border-collapse: collapse;
+					width: 100%;
+					table-layout: fixed;
+
+					td, th {
+						border: 1px solid #ffffff;
+						text-align: left;
+						padding-right: 8px;
+						padding-bottom: 8px;
+						vertical-align: top;
+						word-wrap:break-word;
+					}
+        		}
 			</style>
 			<table class="aboutus">
 				<tr>
@@ -107,26 +122,26 @@ const AboutUs = () => {
 
 				<h2>联络我们</h2>
 
-				<table >
+				<table class="contactus">
 					<tr>
-						<td style="text-align: left; vertical-align: top;"><u>刊登公共启事 / 帐号管理相关事宜</u></td>
-						<td style="text-align: left; vertical-align: top;"><u>付款相关事宜</u></td>
+						<td><u>刊登公共启事 / 帐号管理相关事宜</u></td>
+						<td><u>付款相关事宜</u></td>
 					</tr>
 					<tr>
-						<td style="text-align: left; vertical-align: top;">政府物流服务署印务科</td>
-						<td style="text-align: left; vertical-align: top;">政府物流服务署会计组</td>
+						<td>政府物流服务署印务科</td>
+						<td>政府物流服务署会计组</td>
 					</tr>
 					<tr>
-						<td style="text-align: left; vertical-align: top;">地址：香港柴湾创富道11号政府物料营运中心10楼</td>
-						<td style="text-align: left; vertical-align: top;">地址：香港北角渣华道 333 号北角政府合署 10 楼</td>
+						<td>地址：香港柴湾创富道11号政府物料营运中心10楼</td>
+						<td>地址：香港北角渣华道 333 号北角政府合署 10 楼</td>
 					</tr>
 					<tr>
-						<td style="text-align: left; vertical-align: top;">电话：2564 9570 / 2564 9565</td>
-						<td style="text-align: left; vertical-align: top;">电话：2231 5160</td>
+						<td>电话：2564 9570 / 2564 9565</td>
+						<td>电话：2231 5160</td>
 					</tr>
 					<tr>
-						<td style="text-align: left; vertical-align: top;">电邮：<a href="mailto:[email protected]">[email protected]</a></ td>
-						<td style="text-align: left; vertical-align: top;">电邮：<a href="mailto:[email protected]">[email protected]</a></ td>
+						<td>电邮：<a href="mailto:[email protected]">[email protected]</a></ td>
+						<td>电邮：<a href="mailto:[email protected]">[email protected]</a></ td>
 					</tr>
 				</table>
 

src/pages/AboutUs/AboutUs_en.js

@@ -38,6 +38,22 @@ const AboutUs = () => {
 						padding: 8px;
 					}
         		}
+
+				table.contactus {
+					font - family: arial, sans-serif;
+					border-collapse: collapse;
+					width: 100%;
+					table-layout: fixed;
+
+					td, th {
+						border: 1px solid #ffffff;
+						text-align: left;
+						padding-right: 8px;
+						padding-bottom: 8px;
+						vertical-align: top;
+						word-wrap:break-word;
+					}
+        		}
 			</style>
 			<table class="aboutus">
 				<tr>
@@ -110,26 +126,30 @@ const AboutUs = () => {
 
 				<h2>Contact Us</h2>
 
-				<table >
+				<table  class="contactus" >
+				 	<colgroup>
+						<col width='50%' />
+						<col width='50%' />
+					</colgroup>
 					<tr>
-						<td style="text-align: left; vertical-align: top;"><u>Publishing public notices / account management related matters</u></td>
-						<td style="text-align: left; vertical-align: top;"><u>Payment related matters</u></td>
+						<td ><u>Publishing public notices / account management related matters</u></td>
+						<td ><u>Payment related matters</u></td>
 					</tr>
 					<tr>
-						<td style="text-align: left; vertical-align: top;">Printing Division, Government Logistics Department</td>
-						<td style="text-align: left; vertical-align: top;">Accounts Section, Government Logistics Department</td>
+						<td >Printing Division, Government Logistics Department</td>
+						<td >Accounts Section, Government Logistics Department</td>
 					</tr>
 					<tr>
-						<td style="text-align: left; vertical-align: top;">Address: 10/F, Government Logistics Centre, 11 Chong Fu Road, Chai Wan, Hong Kong</td>
-						<td style="text-align: left; vertical-align: top;">Address: 10/F, North Point Government Offices, 333 Java Road, North Point, Hong Kong</td>
+						<td >Address: 10/F, Government Logistics Centre, 11 Chong Fu Road, Chai Wan, Hong Kong</td>
+						<td >Address: 10/F, North Point Government Offices, 333 Java Road, North Point, Hong Kong</td>
 					</tr>
 					<tr>
-						<td style="text-align: left; vertical-align: top;">Telephone: 2564 9570 / 2564 9565</td>
-						<td style="text-align: left; vertical-align: top;">Telephone: 2231 5160</td>
+						<td >Telephone: 2564 9570 / 2564 9565</td>
+						<td >Telephone: 2231 5160</td>
 					</tr>
 					<tr>
-						<td style="text-align: left; vertical-align: top;">Email: <a href="mailto:[email protected]">[email protected]</a></td>
-						<td style="text-align: left; vertical-align: top;">Email: <a href="mailto:[email protected]">[email protected]</a></td>
+						<td >Email: <a href="mailto:[email protected]">[email protected]</a></td>
+						<td >Email: <a href="mailto:[email protected]">[email protected]</a></td>
 					</tr>
 				</table>
 

src/pages/AboutUs/AboutUs_zh.js

@@ -38,6 +38,21 @@ const AboutUs = () => {
 						padding: 8px;
 					}
 				}
+				table.contactus {
+					font - family: arial, sans-serif;
+					border-collapse: collapse;
+					width: 100%;
+					table-layout: fixed;
+
+					td, th {
+						border: 1px solid #ffffff;
+						text-align: left;
+						padding-right: 8px;
+						padding-bottom: 8px;
+						vertical-align: top;
+						word-wrap:break-word;
+					}
+        		}
 			</style>
 			<table class="aboutus">
 				<tr>
@@ -111,29 +126,34 @@ const AboutUs = () => {
 
 				<h2>聯絡我們</h2>
 
-				<table >
-					<tr>
-						<td style="text-align: left; vertical-align: top;"><u>刊登公共啟事 / 帳號管理相關事宜</u></td>
-						<td style="text-align: left; vertical-align: top;"><u>付款相關事宜</u></td>
-					</tr>
-					<tr>
-						<td style="text-align: left; vertical-align: top;">政府物流服務署印務科</td>
-						<td style="text-align: left; vertical-align: top;">政府物流服務署會計組</td>
-					</tr>
-					<tr>
-						<td style="text-align: left; vertical-align: top;">地址：香港柴灣創富道11號政府物料營運中心10樓</td>
-						<td style="text-align: left; vertical-align: top;">地址：香港北角渣華道 333 號北角政府合署 10 樓</td>
-					</tr>
-					<tr>
-						<td style="text-align: left; vertical-align: top;">電話：2564 9570 / 2564 9565</td>
-						<td style="text-align: left; vertical-align: top;">電話：2231 5160</td>
-					</tr>
-					<tr>
-						<td style="text-align: left; vertical-align: top;">電郵：<a href="mailto:[email protected]">[email protected]</a></td>
-						<td style="text-align: left; vertical-align: top;">電郵：<a href="mailto:[email protected]">[email protected]</a></td>
-					</tr>
-				</table>
-
+				<p>
+					<table class="contactus">
+						 <colgroup>
+							<col width='50%' />
+							<col width='50%' />
+						</colgroup>
+						<tr>
+							<td><u>刊登公共啟事 / 帳號管理相關事宜</u></td>
+							<td><u>付款相關事宜</u></td>
+						</tr>
+						<tr>
+							<td>政府物流服務署印務科</td>
+							<td>政府物流服務署會計組</td>
+						</tr>
+						<tr>
+							<td>地址：香港柴灣創富道11號政府物料營運中心10樓</td>
+							<td>地址：香港北角渣華道 333 號北角政府合署 10 樓</td>
+						</tr>
+						<tr>
+							<td>電話：2564 9570 / 2564 9565</td>
+							<td>電話：2231 5160</td>
+						</tr>
+						<tr>
+							<td>電郵：<a href="mailto:[email protected]">[email protected]</a></td>
+							<td>電郵：<a href="mailto:[email protected]">[email protected]</a></td>
+						</tr>
+					</table>
+				</p>
 
 			</div>
 			`