`
情唯独钟
  • 浏览: 13598 次
  • 性别: Icon_minigender_1
  • 来自: 石家庄
社区版块
存档分类
最新评论

table去外边框实现“#”字效果

阅读更多

表格中边框的显示

只显示上边框 <table frame=above>

只显示下边框 <table frame=below>

只显示左、右边框 <table frame=vsides>

只显示上、下边框 <table frame=hsides>

只显示左边框 <table frame=lhs>

只显示右边框 <table frame=rhs>

不显示任何边框 <table frame=void>

 

.表格的分隔线可以隐藏

<table border rules=cols cellspacing=0 align=left> 可以隐藏横向的分隔线

<table border rules=rows cellspacing=0 align=right>可以隐藏纵向的分隔线

<table border rules=none cellspacing=0 align=center>可以隐藏横向和纵向的分隔线

-------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>
<TABLE cellSpacing=0 cellPadding=0 width="90%" align=right border=1 rules=rows frame=hsides style="border-collapse:collapse ; " bordercolor="#000000" >

<TR>
<TD >sadad</TD>
<TD >sad</TD>
<TD>dsa</TD>
<TD>asd</TD>
</TR>
<TR>
<TD >ads</TD>
<TD>asd</TD>
<TD>ads</TD>
<TD>asds</TD>
</TR>

</TABLE>
</BODY>
</HTML>


table width=1 就已经把宽度设置为 1 了
我们面临的问题是这样的,每一个 td 边线都是 1px,table 边线也是 1px。那么当两个td相邻的时候,因为每个 td 边线都是1,所以靠进的时候边线的“宽度和”就是 1+1=2。当 td 和 table 相邻时,同样。

collapse :  相邻边被合并
相邻边被合并!以前我说的 1+1=2 就是因为 td 和td之间,td 和table 之间相邻边的问题。默认时相邻边没有合并,所以就是 1+1=2。现在我们使用 border-collapse:collapse把我们合并了,所以宽度还是 1px。也就是出现细线边框了

 

 

设置Table的细边框通常有这么几种方式:

1、设置边框的BORDER=0 、cellspacing=1,设置Table的背景色为所要的边框色,再设置所有的td背景色为白色,这样细边框就显露出来了。这个方法有些邪气,看似不太正宗,但是也能达到效果,条条大路通罗马嘛!

再来看看第二种方法:

2、设置BORDER=0 ,再通过CSS,给Table加上1px的border-top,border-left,然后再设置所有的td的border-right,border-bottom,这样也能达到所要的效果。可见CSS很是强大啊。

今天在实践过程中发现,以上两种方式生成的HTML在Word中打开则发生问题,不能达到预期效果。怎么办呢!?

下面介绍一种更为简便有效的方法:

3、设置table的CSS为{border-collapse:collapse;border:none;},再设置td的CSS为{border:solid #000 1px;},大功告成!而且Word也能认出这种设置。

第三种方法最好,我也是在导出word时,很多css失效的情况下,找到了这个解决办法!

分享到:
评论

相关推荐

    table边框线属性

    在处理嵌套表格时,通过细致调整边框线属性,可以实现层次分明、清晰易读的视觉效果。文件`Table属性_蜕变.htm`和`Table属性_蜕变.files`可能包含了更具体的示例代码和演示,可以帮助你更好地理解和应用这些知识。

    Html_的table_边框设置

    通过上述介绍,可以看出HTML表格边框设置可以通过CSS进行高度定制,从而实现各种视觉效果。掌握这些技巧不仅能够提升网页的美观度,还能提高用户体验。开发者可以根据实际需求选择合适的边框样式和颜色,使得表格既...

    使用css如何操作Table没有外边框只有内边框

    总结起来,要使用CSS操作表格实现没有外边框只有内边框的效果,主要涉及以下步骤: 1. 设置`border-collapse: collapse;`以合并单元格边框。 2. 将表格的`border`设为0,移除外边框。 3. 为单元格定义内边框,通常...

    CSS控制Table内外边框、颜色、大小示例

    要为整个表格添加外边框,可以使用`.table`选择器,并指定边框样式、颜色和宽度。例如: ```css .table { border: solid 1px #add9c0; } ``` 这将在表格的外部创建一个1像素宽的实线边框,颜色为#add9c0。 3...

    CSS样式简单实现Table没有外边框只有内边框

    总结来说,实现"Table没有外边框只有内边框"的效果主要依赖于以下几点CSS技巧: 1. 使用`border-collapse: collapse;`来合并单元格边框。 2. 将表格的边框设置为0,移除外边框。 3. 针对每个单元格设置边框,确保...

    html,table常用样式

    下面是如何通过CSS来实现这一效果: ```css /* 定义表格的基本样式 */ table.gridtable { font-family: verdana, arial, sans-serif; /* 字体 */ font-size: 11px; /* 字号 */ color: #333333; /* 文字颜色 */ ...

    bootstrap-table.css 表格拖拽排序

    在这个特定的场景中,`bootstrap-table.css`可能包含了拖拽排序的样式规则,如拖动行时的高亮效果、悬浮指示器等,使得交互过程更加直观。 接着,`jquery.tablednd.js`是基于jQuery的TableDnD库,实现了表格行的...

    采用Table CSS实现的TabPane选项卡.rar

    "采用Table CSS实现的TabPane选项卡"是一个利用CSS样式表来构建Tab Pane功能的例子。在这个项目中,我们将深入探讨如何使用纯CSS来创建这种效果,以及为何选择使用表格布局(Table CSS)。 首先,让我们理解什么是...

    漂亮的table表格样式

    例如,添加内边框(border-collapse)和外边框(border): ```css table { border-collapse: collapse; /* 合并单元格之间的边框 */ border: 1px solid #ccc; /* 表格的外边框 */ } td, th { border: 1px ...

    html做表格只显示表格的外边框

    要实现只显示外边框的效果,我们需要使用CSS来控制表格边框的样式。具体而言,我们可以将边框设置为`none`,使得内部单元格的边框不显示,同时为整个表格设置一个外边框。在提供的代码示例中,已经使用了内联样式来...

    table表格样式利用jqgrid实现

    在实现表格样式时,jqGrid允许自定义CSS样式,你可以根据需求调整表格的边框、背景色、字体大小等样式属性。例如,通过设置`ui.jqgrid`、`ui-state-default`等CSS类,可以改变表格的默认外观。同时,jqGrid也提供了...

    table只显示横行、枞行

    综上所述,要实现只显示横行或枞行的效果,可以通过设置`&lt;table&gt;`元素的`rules`和`frame`属性来完成。同时,结合CSS的使用可以使表格的样式更加多样化和美观。在实际开发中,可以根据具体需求选择合适的实现方式。

    让Table的TD有边框而Table右左没有边框的CSS样式

    要实现只给单元格(td)添加边框而保持表格(table)左右两侧没有边框的效果,可以通过CSS控制边框属性来实现。通常,可以通过设置table的边框为0,然后为td单独设置边框来达到这个目的。 根据给定文件,我们可以...

    关于表格table嵌套,边框合并问题的解决方法

    这种设计方式可以用于创建复杂的数据结构或者为了实现特定的布局效果。但是,嵌套表格的边框处理往往比较棘手。 问题在于,当你为外层和内层表格都设置边框(如`border=1`),在浏览器渲染时,内外两层表格的边框会...

    js实现漂亮的table表格

    提供的"JS实现漂亮的表格table特效代码"可能包含JavaScript函数和CSS样式,用于实现上述功能。通常,这将包括对HTML表格元素的操作,以及添加CSS类和JavaScript事件监听器以实现特定效果。 总之,通过结合...

    在Tibco GI中实现table表样式

    在Tibco General Interface (GI) 中实现table表样式是一个重要的设计任务,它涉及到用户界面(UI)的美观和用户体验。Tibco GI 是一个强大的富互联网应用(RIA)开发平台,用于构建交互式、高性能的应用程序。在这个平台...

    HTML Table 漂亮的CSS

    3. **圆角表格**:通过`border-radius`属性实现圆角效果,使表格看起来更柔和。例如: ```css table { border-radius: 8px; } ``` 4. **条纹样式**:使用`nth-child`选择器创建交替的背景色,使表格更具层次感...

    vxe-table vue table 表格组件功能

    在基础功能方面,vxe-table可以实现常规的表格显示需求,如表格尺寸的自定义、斑马线样式、带有边框的展示以及单元格样式的调整等。通过这些基础设置,开发者可以根据实际需求定制表格的外观,以达到更好的视觉效果...

Global site tag (gtag.js) - Google Analytics