2-10问题：tbody的宽、高

在实现About部分最下面Library, Computer Lab等的图文区域效果时，我用了table。我发现浏览器的调试工具中显示table和tr之间多了一层tbody，而且tbody的宽、高都比table少4px，这样就导致整个图文区域四周多了一个1px的边。请问tbody的宽、高该如何设置？怎样去除这个1px的边？谢谢！

EricTaku 2017-10-03

源自：项目：网页布局案例 2-9 页面的底部

30

收起

4回答

小丸子爱吃菜回答被采纳获得+3积分 2017-10-06 13:50:00

你给的链接无法打开，可以尝试给table设置border=“0”，cellpadding="0" cellspacing="0".

因为表格嵌套的层级比较多，有时会有自带的样式，有的样式是我们无法去控制的，所以这个区域建议使用div去写。

EricTaku 提问者 #1

谢谢你的回复！我在css中设置border-spacing为0解决了这个问题。

2017-10-08 01:58:34

好帮手慕糖 2017-10-04 12:17:37

你好，只有部分的代码不能确定问题，建议：这部分不要使用表格，使用div即可，给最外层的盒子设置宽度100%，然后给每个部分设置宽度25%，会比表格更好设置哟。另：浏览器中table和tr之间多了一层tbody，这个是没有影响的哟，只是为了分组便于管理。

祝学习愉快~

提问者 EricTaku #1

谢谢你的回复，在其父元素固定高度的情况下确实可以用div来实现，但是我还是想搞清楚为什么四周会有一个宽度为1px的边。下面是完整代码的链接，恳请帮忙解答，谢谢！ https://1drv.ms/f/s!AjTdPz2uUq0vjO4_iqlmS7uByz_QOA

2017-10-05 01:53:19

提问者 EricTaku 2017-10-03 11:41:44

问题中提到的现象是在Firefox浏览器下出现的，而在Chrome中，宽度为1px的边不是出现在tbody上，而是出现在td上。请问这是怎么回事？谢谢！

提问者 EricTaku 2017-10-03 06:21:13

代码如下：

<div class="about-bottom">

<table>

<tr>

<td>

<div class="about-img-wrapper">

<img src="images/b1.jpg">

<div class="triangle-right"></div>

</div>

<div class="about-img-des-wrapper">

<h3>Library</h3>

<h4>Lorem Ipsum is simply dummy text of the</h4>

<h4>printing and typesetting industry</h4>

<span>Lorem Ipsum has been the industry's standard dummy</span><br>

<span>text ever since the 1500s, when an unknown printer took</span><br>

<span>a gallery of type and scrambled it to make a type</span><br>

<span>specimen book.</span><br>

<div class="explore-btn-wrapper">

<button class="explore">EXPLORE</button>

</div>

</div>

<div class="about-img-wrapper">

<img src="images/b2.jpg">

<div class="triangle-right"></div>

</div>

<div class="about-img-des-wrapper">

<h3>Computer Lab</h3>

<h4>Lorem Ipsum is simply dummy text of the</h4>

<h4>printing and typesetting industry</h4>

<span>Lorem Ipsum has been the industry's standard dummy</span><br>

<span>text ever since the 1500s, when an unknown printer took</span><br>

<span>a gallery of type and scrambled it to make a type</span><br>

<span>specimen book.</span><br>

<div class="explore-btn-wrapper">

<button class="explore">EXPLORE</button>

</div>

</div>

</td>

</tr>

<tr>

<td>

<div class="about-img-des-wrapper">

<h3>Conference Hall</h3>

<h4>Lorem Ipsum is simply dummy text of the</h4>

<h4>printing and typesetting industry</h4>

<span>Lorem Ipsum has been the industry's standard dummy</span><br>

<span>text ever since the 1500s, when an unknown printer took</span><br>

<span>a gallery of type and scrambled it to make a type</span><br>

<span>specimen book.</span><br>

<div class="explore-btn-wrapper">

<button class="explore">EXPLORE</button>

</div>

</div>

<div class="about-img-wrapper">

<img src="images/b3.jpg">

<div class="triangle-left"></div>

</div>

<div class="about-img-des-wrapper">

<h3>Play Ground</h3>

<h4>Lorem Ipsum is simply dummy text of the</h4>

<h4>printing and typesetting industry</h4>

<span>Lorem Ipsum has been the industry's standard dummy</span><br>

<span>text ever since the 1500s, when an unknown printer took</span><br>

<span>a gallery of type and scrambled it to make a type</span><br>

<span>specimen book.</span><br>

<div class="explore-btn-wrapper">

<button class="explore">EXPLORE</button>

</div>

</div>

<div class="about-img-wrapper">

<img src="images/b4.jpg">

<div class="triangle-left"></div>

</div>

</td>

</tr>

</table>

</div>

相似问题

tbody问题

有viewbox的宽高和view的宽高，宽比例和高比例不同时，怎么采取

swiper高度问题

请教个问题为什么表格左右加一起没办法铺满页面宽度

这里显示rect的宽高都是133.33，请问这个数字是怎么算出来的呢，

登录后可查看更多问答，登录/注册

前端小白入门系列课程

参与学习人
提交作业 11218 份
解答问题 36712 个

从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！

本课精华内容

问答作业

为什么我的没有框

5 45

表格的问题

377 41

大家好,body前面有一个红色的小××，麻烦大家帮我看看

378 40

到底是cellspacing还是cellpacing?

0 35

课间活动的表格怎么实现，想了很久也想不出来

60 30

查看更多本课问答

请稍等 ...

意见反馈帮助中心 APP下载