My table rows are not aligned properly. How to achieve it? - html

Question

I have some HTML markup; I created a each table for one record but as shown in img. The text is not aligned properly and ignores <% %> inside there are deluge script, I remove deluge script for easily understandable purpose. I want to display in center even if word is too long, then it should not affect on next row.
Code:
* {
box-sizing: border-box;
}
.row {
margin-left:-5px;
margin-right:-5px;
}
.column {
float: left;
width: 32%;
padding: 5px;
}
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
style=whitespace-wrap:nowrap;
}
tr, td {
padding: 20px;
margin-bottom: 10px;
background-color: #f2f2f2;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.2);
color:#000000;
whitespace-wrap:nowrap;
}
a {
color:#000000;
}
[class*="column"] {
width: 100%;
}
<div class="row">
<div class="column">
<table>
<tr>
<td><%=rec1%></td>
<td><%=s1%></td>
</tr>
</table>
</div>
<div class="column">
<table>
<tr>
<td><%=rec2%></td>
<td><%=s2%></td>
</tr>
</table>
</div>
<div class="column">
<table>
<tr>
<td><%=rec3%></td>
<td><%=s3%></td>
</tr>
</table>
</div>
<div class="column">
<table>
<tr>
<td><%=rec4%></td>
<td><%=s4%></td>
</tr>
</table>
</div>
<div class="column">
<table>
<tr>
<td><%=rec5%></td>
<td><%=s5%></td>
</tr>
</table>
</div>
<div class="column">
<table>
<tr>
<td><%=rec6%></td>
<td><%=s6%></td>
</tr>
</table>
</div>
</div>
<div>No Country Available!</div>
</table>
Thanks in advance.

Answer 1

I think i understood what you said.
You should apply a 50% width for every
This will be the css
* {
box-sizing: border-box;
}
.column {
padding: 5px;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #ddd;
width: 100%;
}
tr,
td {
width: 50%;
text-align: center;
padding: 20px;
margin-bottom: 10px;
background-color: #f2f2f2;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.2);
color: #000000;
whitespace-wrap: nowrap;
}
a {
color: #000000;
}
Here is a Codepen
Code

Answer 2

Maybe you can add tag and then close it where you want. Add the center tag at the column which you want to have centered text. Then, to not affect other rows give width to the column where you have given the center tag. THis will not affect anything else.