I'm confused about why the border of the first tbody tr's td is not visible.
https://i.stack.imgur.com/Fwlv7.png I can't see any reason why the border is not showing up.
Here's what I've figured out:
- If the natural height of th is greater than the fixed height for th, the first tbody tr's td will be visible.
- If there is no code th{height: xxpx;}, the first tbody tr's td will be visible.
.table {
border-spacing: 0;
border-collapse: collapse;
}
.table.summary-style
{
font-size: 11px;
width: 100%;
table-layout: fixed;
text-align: center;
color: #666;
border-bottom: 1px solid #666;
background: #fff;
}
.table.summary-style caption
{
font-size: 0;
line-height: 0;
display: none;
overflow: hidden;
clip: rect(1px 1px 1px 1px);
/* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
width: 0;
height: 0;
margin: 0;
padding: 0;
opacity: 0;
}
.table.summary-style thead th
{
font-size: 16px;
line-height: 1;
position: relative;
box-sizing: border-box;
height: 38px;
padding: 5px 4px;
text-align: center;
vertical-align: middle;
color: #666;
background: #ddd;
}
.table.summary-style > tbody > tr > td
{
font-size: 13px;
line-height: 1.38;
box-sizing: border-box;
height: 36px;
padding: 4px 10px;
text-align: left;
vertical-align: middle;
color: #666;
border-top: 1px solid #666;
background: #fff;
}<table class="table summary-style">
<thead>
<tr>
<th scope="col">title</th>
<th scope="col">title</th>
<th scope="col">title</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3">No Data.</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
</tbody>
</table>