Seeking clarity on how to align list items within table cells using CSS. Click the link below for a visual representation of the issue:
I am looking to have each item in a list not centered vertically within its table cell.
To view an example illustrating my problem, visit: http://jsfiddle.net/qc1st2t9/
How can I modify the CSS to ensure that list items are not centered inside a table cell when the cell is taller than the content within the unordered list?
For those who prefer not to access jsfiddle, here is the code snippet:
HTML:
<table>
<tr>
<td colspan="4">Events(1) | Covered Amount: 25/79 | Percent Covered: 32%</td>
</tr>
<tr>
<td>first</td>
<td>second</td>
<td>third</td>
<td>fourth</td>
</tr>
<tr>
<td>
<ul>
<li>test</li>
</ul>
</td>
<td>
<ul>
<li>test</li>
</ul>
</td>
<td>
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</td>
<td>
<ul></ul>
</td>
</tr>
</table>
My CSS attempts (excluding any rules causing issues):
table {
border-collapse: collapse;
text-align:left;
width:100%;
margin:auto;
}
th, td {
border: 1px solid #cecfd5;
padding: 10px 15px;
height:25px;
max-height:50px;
text-align:left;
width:25%;
font-weight: normal;
}
th > div {
max-height:50px;
overflow-y:scroll;
overflow-x:hidden;
text-align:left;
}