Can anyone assist me with this task? I need help centering text within a table row ('Some text here...') so that it always appears in the middle of the screen. The table will have horizontal scrolling.
.compare-content {
max-width: 480px;
overflow-x: auto;
}
.compare-content table {
width: 100%;
text-align: center;
font-size: 12px;
}
.compare-content table caption {
font-size: 14px;
line-height: 39px;
border-top: 1px solid #CECECE;
border-bottom: 1px solid #CECECE;
}
.compare-content table tr {
line-height: 25px;
}
.compare-content table td {
padding: 0 10px;
min-width: 145px;
}
.compare-content tr:nth-child(odd) {
background-color: #F4F4F4;
color: #898989;
}<div class="compare-content">
<table class="total">
<caption>Summary</caption>
<tr>
<td colspan="100%">Some text here...</td>
</tr>
<tr>
<td></td>
<td>text1</td>
<td>text2</td>
<td>text3</td>
</tr>
<tr>
<td colspan="100%">Some text here...</td>
</tr>
<tr>
<td></td>
<td>text4</td>
<td>text5</td>
<td>text6</td>
</tr>
<tr>
<td colspan="100%">Some text here...</td>
</tr>
<tr>
<td></td>
<td>text7</td>
<td>text8</td>
<td>text9</td>
</tr>
<tr>
<td colspan="100%">Some text here...</td>
</tr>
<tr>
<td></td>
<td>text10</td>
<td>text11</td>
<td>text12</td>
</tr>
</table>
<div>