请教个问题,为什么用css无法调整table中图片的大小

请教个问题,为什么用css无法调整table中图片的大小

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3-2 项目作业</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<table class="main" cellspacing="0">
<!-- 表头 -->
<thead>
<tr class="header">
<td colspan="2"><img src="img/logo.png"></td>
</tr>
</thead>
<!-- 主体 -->
<tbody>
<tr>
<!-- 左侧 -->
<td class="left" valign="top">
<br>
<p>商品管理</p><br>
<p>评价管理</p><br>
<p>咨询管理</p><br><br>
<h3>全部订单</h3><br>
<p>已完成订单</p><br>
<p>待处理订单</p><br>
<p>今日物流</p><br><br>
<p>月考核</p><br>
<p>季度考核</p><br>
<p>年度考核</p>
</td>
<!-- 右侧 -->
<td class="right">
<!-- 全部订单 -->
<table class="top">
<tr>
<td>全部订单</td>
</tr>
</table>
<!-- 时间查询 -->
<table class="middle">
<tr>
<td>
<form>
查询:<input type="date" name="date">&nbsp;至&nbsp;<input type="date" name="date">
</form>
</td>
</tr>
</table>
<!-- 订单列表 -->
<table class="bottom" cellspacing="0">
<!-- 第一行 -->
<tr>
<th colspan="2" class="noleft">宝贝信息</th>
<th>订单数量</th>
<th>单价</th>
<th>买家</th>
<th>下单时间</th>
<th>实付款</th>
<th>订单操作</th>
</tr>
<!-- 第二行 -->
<tr>
<td class="noleft"><img src="img/txue.png" width="50px" height="50px"></td>
<td>2019新款个性男女潮牌immoc暮春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-2-21 21:54</td>
<td>240</td>
<td>待付款</td>
</tr>
<!-- 第三行 -->
<tr>
<td class="noleft"><img src="img/xie.jpg" width="50px" height="50px"></td>
<td>2019新款个性男女潮牌immoc暮春之行运动鞋</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-2-21 21:54</td>
<td>240</td>
<td>待付款</td>
</tr>
<!-- 第四行 -->
<tr>
<td class="noleft"><img src="img/txue.png" width="50px" height="50px"></td>
<td>2019新款个性男女潮牌immoc暮春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-2-21 21:54</td>
<td>240</td>
<td>待付款</td>
</tr>
<!-- 第五行 -->
<tr>
<td class="noleft"><img src="img/xie.jpg" width="50px" height="50px"></td>
<td>2019新款个性男女潮牌immoc暮春之行运动鞋</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-2-21 21:54</td>
<td>240</td>
<td>待付款</td>
</tr>
<!-- 第六行 -->
<tr>
<td class="noleft"><img src="img/txue.png" width="50px" height="50px"></td>
<td>2019新款个性男女潮牌immoc暮春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-2-21 21:54</td>
<td>240</td>
<td>待付款</td>
</tr>
<!-- 第七行 -->
<tr>
<td class="noleft"><img src="img/xie.jpg" width="50px" height="50px"></td>
<td>2019新款个性男女潮牌immoc暮春之行运动鞋</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-2-21 21:54</td>
<td>240</td>
<td>待付款</td>
</tr>
<!-- 第八行 -->
<tr>
<td class="noleft"><img src="img/txue.png" width="50px" height="50px"></td>
<td>2019新款个性男女潮牌immoc暮春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-2-21 21:54</td>
<td>240</td>
<td>待付款</td>
</tr>
<!-- 第九行 -->
<tr>
<td class="noleft"><img src="img/xie.jpg" width="50px" height="50px"></td>
<td>2019新款个性男女潮牌immoc暮春之行运动鞋</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-2-21 21:54</td>
<td>240</td>
<td>待付款</td>
</tr>
<!-- 第十行 -->
<tr>
<td class="noleft"><img src="img/txue.png" width="50px" height="50px"></td>
<td>2019新款个性男女潮牌immoc暮春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-2-21 21:54</td>
<td>240</td>
<td>待付款</td>
</tr>
<!-- 第十一行 -->
<tr>
<td class="noleft"><img src="img/xie.jpg" width="50px" height="50px"></td>
<td>2019新款个性男女潮牌immoc暮春之行运动鞋</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-2-21 21:54</td>
<td>240</td>
<td>待付款</td>
</tr>
<!-- 第十二行 -->
<tr>
<td class="noleft"><img src="img/txue.png" width="50px" height="50px"></td>
<td>2019新款个性男女潮牌immoc暮春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-2-21 21:54</td>
<td>240</td>
<td>待付款</td>
</tr>
<!-- 第十三行 -->
<tr class="nobottom">
<td class="noleft"><img src="img/txue.png" width="50px" height="50px"></td>
<td>2019新款个性男女潮牌immoc暮春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-2-21 21:54</td>
<td>240</td>
<td>待付款</td>
</tr>
</table>
</td>
</tr>
</tbody>
<!-- 页脚 -->
<tfoot>
<tr>
<td colspan="2">2019-9-21 &copy;imooc.com</td>
</tr>
</tfoot>
</table>
</body>
</html>
<!-- 以下是css -->
*{
    margin: 0;
    padding: 0;
}
.main{
    width: 100%;
    border-collapse: none;
    background: rgb(22,155,213);
}
/*表头*/
.main thead .header{
    width: 100%;
}
.main > thead .header td{
    height: 60px;
}
.main > thead .header > img{
    line-height: 60px;
}
/*主体*/
.main tbody{
    width: 100%;
    background: #fff;
}
/*主体左侧12%*/
.main tbody > tr > .left{
    width: 12%;
    border-left: 2px solid #ececec;
}
/*主体右侧88%*/
.main tbody > tr > .right{
    width: 88%;
    border:5px solid #ececec;
}
/*全部订单*/
.main tbody > tr > .right > .top{
    height: 55px;
    width: 100%;
    border-bottom: 5px solid #ececec;
}
/*时间查询*/
.main tbody > tr > .right > .middle{
    height: 55px;
    width: 100%;
    border-bottom: 5px solid #ececec;
}
/*商品信息*/
.bottom{
    width: 100%;
    text-align: center;
    border: none;
}
.bottom tr td{
    border-bottom: 2px solid #ececec;
    border-left: 2px solid #ececec;
    height: 54px;
}
/*最后一行的单元格没有底部边栏*/
.bottom .nobottom td{
    border-bottom: 0;
}
/*每行的左边没有左侧边栏*/
.bottom tr .noleft{
    border-left: none;
}
/*第一行标题*/
.bottom tr th{
    border-bottom: 2px solid #ececec;
    border-left: 2px solid #ececec;
    height: 50px;
}
/*第一行标题没有左侧边栏*/
.bottom tr .noleft{
    border-left: none;
}
/*页脚*/
.main tfoot{
    width: 100%;
}
.main tfoot tr td{
    height: 60px;
    text-align: center;
}


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕慕子 2019-05-05 13:34:20

同学你好, 订单中的图片也是可以设置宽高的哦,建议: 可以使用css选择器找到对应的图片,然后设置宽高。

http://img1.sycdn.imooc.com//climg/5cce75a30001aeca04290164.jpg

如果帮助到了你, 欢迎采纳!

祝学习愉快~~~

好帮手慕慕子 2019-05-04 12:18:27

同学你好,请问同学这里是想问为什么无法调整头部的图片大小吗?如果是指这里的话, 那么是因为同学的css选择器写的不对, 找不到图片,所以设置的样式不生效。 建议参考下图注释修改:

http://img1.sycdn.imooc.com//climg/5ccd1234000142d714720424.jpg

如果同学不是指这里, 可以详细的描述你的问题, 再次提问, 我们会继续为你解答的.

如果帮助到了你, 欢迎采纳!

祝学习愉快~~~

  • 提问者 慕哥4409719 #1
    好的,谢谢。不是头部的图片,是订单的衬衫和鞋子的图片。
    2019-05-05 13:28:45
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师
插入代码