老师我右侧下方表格高度好像有点问题,但是用box-sizing也解决不了

老师我右侧下方表格高度好像有点问题,但是用box-sizing也解决不了

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<style>*{
margin: 0;
padding: 0;
font-size: 14px;
font-family: "微软雅黑";
}
 
thead,tfoot{
width: 100%;
height: 60px;
background-color: #169BD5;
}
tbody{
width: 100%;
border: 2px solid gray
}
.container{
width: 100%;
    border:1px solid #ccc;
}
.left{
width: 12%
}
.left p,.left h1{
font-size: 16px;
line-height: 1.5em;
margin: 10px 0 0 10px;
}
.right{
width: 88%;
border:1px solid #ccc;
}
.right-order,.right-time,.right-list{
width: 100%;
border:1px solid #ccc;
box-sizing:border-box;
}
.special td{
height: 50px;
text-align: center;
box-sizing:border-box;
}
.right-order td,.right-time td{
height: 50px;
line-height: 50px;
padding-left: 10px;
box-sizing:border-box;
}
.right-list td{
height: 54px;
text-align: center;
border: 1px solid gray;
box-sizing:border-box;
}
.right-list img{
height: 50px;
}</style>
</head>
<body>
<!-- 页面 -->
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<!-- 页头部分 -->
<thead>
<tr>
<td>
<a href="#"><img src="../img/logo.png" alt="logo"></a>
</td>
</tr>          
</thead>
<!-- 页面主体部分 -->
<tbody>
<tr>
<td>
<table class="container">
<tr>
<!-- 左侧 -->
<td class="left" valign="top">
<p>商品管理</p>
<p>评价管理</p>
<p>咨询管理</p><br><br>
<h1>全部订单</h1>
<p>已完成订单</p>
<p>待处理订单</p>
<p>今日物流</p><br><br>
<p>月考核</p>
<p>季度考核</p>
<p>年度考核</p>
</td>
<!-- 右侧 -->
<td class="right">
<!-- 右侧上方表格 -->
<table class="right-order">
<tr>
<td>全部订单</td>
</tr>
</table>
<!-- 右侧中间表格 -->
<table class="right-time">
<tr>
<td>
查询:<input type="date" name="date1">至<input type="date" name="date2">
</td>
</tr>
</table>
<!-- 右侧下方表格 -->
<table class="right-list" cellpadding="0" cellspacing="0">
<tr class="special">
<td colspan="2">宝贝信息</td>
<td>订单数量</td>
<td>单价</td>
<td>买家</td>
<td>下单时间</td>
<td>实付款</td>
<td>订单操作</td>
</tr>
 
<tr>
<td><img src="../img/txue.png" alt="txue"></td>
<td>2019新款个性男女潮牌imooc暮春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-2-21 21:54</td>
<td>240</td>
<td>待付款</td>
</tr>
 
<tr>
<td><img src="../img/xie.jpg" alt="xie"></td>
<td>2019新款个性男女潮牌imooc暮春之行运动鞋</td>
<td>2</td>
<td>120</td>
<td>小李子</td>
<td>2019-2-21 19:04</td>
<td>240</td>
<td>未发货</td>
</tr>
 
<tr>
<td><img src="../img/txue.png" alt="txue"></td>
<td>2019新款个性男女潮牌imooc暮春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小红</td>
<td>2019-2-21 16:54</td>
<td>240</td>
<td>待发货</td>
</tr>
 
<tr>
<td><img src="../img/xie.jpg" alt="xie"></td>
<td>2019新款个性男女潮牌imooc暮春之行运动鞋</td>
<td>2</td>
<td>120</td>
<td>可乐</td>
<td>2019-2-21 14:30</td>
<td>240</td>
<td>未发货</td>
</tr>
 
<tr>
<td><img src="../img/txue.png" alt="txue"></td>
<td>2019新款个性男女潮牌imooc暮春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>魏明</td>
<td>2019-2-21 14:30</td>
<td>240</td>
<td>未发货</td>
</tr>
 
<tr>
<td><img src="../img/xie.jpg" alt="xie"></td>
<td>2019新款个性男女潮牌imooc暮春之行运动鞋</td>
<td>2</td>
<td>120</td>
<td>李晓雨</td>
<td>2019-2-21 14:30</td>
<td>240</td>
<td>未发货</td>
</tr>
 
<tr>
<td><img src="../img/txue.png" alt="txue"></td>
<td>2019新款个性男女潮牌imooc暮春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>艳艳</td>
<td>2019-2-21 14:30</td>
<td>240</td>
<td>未发货</td>
</tr>
 
<tr>
<td><img src="../img/xie.jpg" alt="xie"></td>
<td>2019新款个性男女潮牌imooc暮春之行运动鞋</td>
<td>2</td>
<td>120</td>
<td>片片</td>
<td>2019-2-21 14:30</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr>
<td><img src="../img/txue.png" alt="txue"></td>
<td>2019新款个性男女潮牌imooc暮春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小兰</td>
<td>2019-2-21 14:30</td>
<td>240</td>
<td>未发货</td>
</tr>
 
<tr>
<td><img src="../img/xie.jpg" alt="xie"></td>
<td>2019新款个性男女潮牌imooc暮春之行运动鞋</td>
<td>2</td>
<td>120</td>
<td>魏璎珞</td>
<td>2019-2-21 14:30</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr>
<td><img src="../img/txue.png" alt="txue"></td>
<td>2019新款个性男女潮牌imooc暮春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小慕</td>
<td>2019-2-21 14:30</td>
<td>240</td>
<td>未发货</td>
</tr>
 
<tr>
<td><img src="../img/txue.png" alt="txue"></td>
<td>2019新款个性男女潮牌imooc暮春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小苏</td>
<td>2019-2-21 14:30</td>
<td>240</td>
<td>未发货</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
<!-- 页尾部分 -->
<tfoot>
<tr>
<td align="center" width="100%" height="60px">
2019-9-21 &copy;imooc.com
</td>
</tr>
</tfoot>
</table>
</body>
</html>


正在回答

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

3回答

同学你好, 这是因为img标签自带间距造成的。可以给img标签设置display:block;属清除间距。

建议: 参照老师上次回答的修改代码 

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

修改后的效果图:

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

另, 建议: 同学以后提问可以像下图所示的方式, 直接描述想要实现的效果, 便于老师高效的为你解决问题

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

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

祝学习愉快~~~


  • 猴野大表哥 提问者 #1
    好的,不好意思,谢谢老师
    2019-05-24 14:01:43
好帮手慕慕子 2019-05-24 10:29:31

同学你好, 请问你是想问如下图所示区域为什么图片下方会有空白吗?

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

如果是指这里的话, 那么是因为img标签自带间距导致的, 可以给img标签设置display:block;属消除。 另, 需要使用margin:0 auto; 让图片在单元格水平居中显示。 目前同学只需要了解就可以了, 后面学习CSS会有详细的讲解哦, 示例

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

如果不是指这里, 建议: 可以详细的描述问题是什么, 想要实现的什么样的效果, 方便老师高效的为你解决问题

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

祝学习愉快~~~

  • 提问者 猴野大表哥 #1
    不是啊...是说单元格要求是54,但是不知道为什么我单元格是58
    2019-05-24 11:04:48
好帮手慕慕子 2019-05-23 17:01:23

同学你好, 请问你这里是想如下图所示为什么右侧下方有空白间距吗?

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

如果是指这里的话, 那么是因为表格的特性造成的, 建议修改: 可以给右侧表格添加cellpadding和cellspacing属性。

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

如果不是指这里的话, 建议: 可以详细的描述一下指的是哪里, 再次提问, 我们会继续为你解答的

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

祝学习愉快~~~

  • 提问者 猴野大表哥 #1
    不是这里,是这个空距上方的单元格高度
    2019-05-23 22:53:15
  • 提问者 猴野大表哥 #2
    不是啊...是说单元格要求是54,但是不知道为什么我单元格是58
    2019-05-24 11:04:18
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

帮助反馈 APP下载

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

公众号

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

在线咨询

领取优惠

免费试听

领取大纲

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