tbody加边框
taotaoit Bootstrap 2017-09-14 3166 0
关于本站

“最难不过坚持”

本人承接扒站仿站,php网站维护,病毒查杀,网站编辑,网站改版,html制作

有需要网站维护,改版,病毒查杀,网站编辑,网站备案,html制作等相关的工作可以联系我。
本人有多年相关工作经验,也可提供免费咨询,交个朋友。
有需要探讨问题的朋友,也可以加我微信,共同探讨!
微信:15011482830 QQ:408917339

3713650 2275 32
最新评论
<script>alert(11)</script>
评 留言
:kaixin: :haha:
评 phpExcel列数据自动换行的方法->getAlignment()->setWrapText(true);
666 :kaixin:
评 return和return false的区别
楼主很给力,请教了有一个问题,很细心给我解答,还帮我解决了问题。 :zhenbang: :zhenbang: :zhenbang:
评 留言
厉害 :zhenbang: :zhenbang: :zhenbang:
评 留言
文章标签更多
ThinkPHP (240)
Mysql (48)
DedeCms (33)
jQuery (58)
证件照 (1)
setInc (4)
setDec (4)
onclick (5)
打开边栏(ESC) 关闭边栏(ESC)

表格用的是bootstrap的样式,在给tbody加边框的时候,左下右都有边框,上没有边框,如图:

from clipboard

表格代码为:

<table class="table table-hover table-striped table-bordered">           
		   <thead>
		   <tr>
             <th width='170' align='right'>主人姓名<font color='red'>*</font>:</th>
             <td>
			 
			 </td>
           </tr>
		   </thead>		   
		   <tbody id="userAddInfo" style="display:none; border:2px solid #F57274;">           
			   <tr>
				 <th width='170' align='right'>主人姓名<font color='red'>*</font>:</th>
				 <td><input type='text' id='userName' class="form-control wst-ipt" value='{$object.userName}' maxLength='25'/></td>
			   </tr>
			   <tr>
				 <th align='right'>联系手机<font color='red'>*</font>:</th>
				 <td><input type='text' id='userPhone' name='userPhone' class="form-control wst-ipt" value='{$object.userPhone}' maxLength='11'/></td>
			   </tr>
			   <tr>
				 <th align='right'>地址:</th>
				 <td><input type='text' id='userAddress' name='userAddress' class="form-control wst-ipt" value='{$object.userAddress}' maxLength='11'/></td>
			   </tr>
		   </tbody>
       </table>
经过一点点修改bootstrap.css样式表发现,可能是thead的下边框把tbody的上边框盖住了。

网上搜索了解,thead是不显示下边框的,如果想显示下边框,必须通过控制thead里面的th、td元素的边框。

添加自己的css样式,覆盖bootstrap.css样式(不是直接修改)

.table-wo > thead > tr > th,.table-wo > thead > tr > td {border-bottom:0;}
在bootstrap.css里面,thead>tr>th、thead>tr>td它们的下边框是2px,我给他们清0。然后在table中加入table-wo样式,<table class="table table-hover table-striped table-bordered table-wo">,tbody就可以显示上边框了。

from clipboard


版权声明:本站原创文章,允许自由转载。

相关推荐
AdminLTE管理后台提示框,bootstrap框架提示框Tooltip
Bootstrap | 2018-08-16 10215
AdminLTE管理后台提示框 Bootstrap框架提示框Tooltip 实现方法: html代码: <span data-toggle="tooltip" title="提示框内容" data-placement="right">是</span> 页面头部需引入jquery.min.js...
bootstrap修改col的间距
Bootstrap | 2019-09-11 6997
用bootstrap布局时会产生一些问题,比如col水平间距过大 修改方法: 重新设置col之间的间距 [class*="col-"]{ padding: 5px; } 在bootstrap.css随便搜索col-md会发现,col每列之间之所以有间距,是因为col里面的左右内边距都是15px形成的,这样...
评论:0条
评论加载中...
发表评论