tfoot的位置对显示效果的影响

一直以为tfoot的位置对显示是没有影响的，但是这边我换了tfoot设置的位置显示效果大不同

tfoot放在tbody后的话

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hw-h5</title>
<link rel="stylesheet" href="style/hw-h5.css" type="text/css">
<link rel="icon" href="img/favicon.png">
</head>
<body>
<table>
<thead>
<tr>
<td><img src="img/logo.png" alt=""></td>
</tr>
</thead>
 
<tbody>
<table>
<tr>
<td>
<p>商品管理</p>
<br/>
<p>评价管理</p>
<br/>
<p>咨询管理</p>
<br/>
<p>全部订单</p>
<br/>
</td>
<td>
<table></table>
<table></table>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
</tbody>
<tfoot>
<tr>
<td>2019-9-21&nbsp;&copy;imooc.com</td>
</tr>
</tfoot>
 
</table>
</body>
</html>

其中内容就被挤到table外面去了只有在tfoot在tbody前（thead后）的时候，css效果才能显示。

但是看下面截图右边部分的话，table好像凭空多出来一个，tbody内容挤到后一个table中

有点一头雾水

参考起见，附上css代码

table{
    width: 100%;
    /*background-color: #169bd5;*/
}
 
thead{
    background: #169bd5;
    height: 60px;
}
 
thead > a > img{
    padding-top: 10px;
    padding-left: 5px;
}
 
tbody{
    border: 1px solid gray;
}
 
tfoot{
    background-color: red;
    width: 100%;
    height: 60px;
    text-align: center;
    line-height: 60px;
}