`
objet888
  • 浏览: 61304 次
  • 性别: Icon_minigender_1
  • 来自: 东莞
最近访客 更多访客>>
社区版块
存档分类
最新评论

真表格(css属性border-collapse)

    博客分类:
  • css
阅读更多
<BR><BR><BR><BR>

//这是表格:
<form name="searchuser" method="POST" action="http://localhost:4444/news/index.php/productsmanage/delProducts">
<center>
  <table width="80%" border="1" align="center" bordercolor="#C0C0C0" class="table_form">
    <tr height=25  bgcolor="#E8E8E8">
      <th width="20%" align="center"><strong>编号</strong></th>
      <th width="20%" align="center"><strong>产品名称</strong></th>
  <th width="20%" align="center"><strong>所属分类</strong></th>
  <th width="20%" align="center"><strong>图片</strong></th>
      <th width="20%" align="center">
        <input  type='checkbox' name=chkall onclick='CheckAll(this.form)'><strong>全选</strong>
        <input type='submit' value='删除'>
      </th>
    </tr>
  </table>
</center>
</form>
<style>

/*语法:border-collapse : separate | collapse
取值:
separate  :  默认值。边框独立(标准HTML)
collapse  :  相邻边被合并*/

.table_form {border-collapse: collapse}
.table_form td, .table_form th { line-height:150%; padding:4px;font-size:12px; font-family:"宋体";}
.table_form th strong { color:#077ac7;}
</style>
分享到:
评论

相关推荐

    table中的border-collapse属性

    在探讨“table中的border-collapse属性”这一主题时,我们深入剖析了CSS中这一关键属性的运作机制及其对表格布局的影响。border-collapse属性是CSS中用于控制表格边框表现的重要属性,它决定了表格单元格(td)之间...

    一个属性border-collapse解决Table的边框问题

    在网页设计中,表格(Table)...总结来说,border-collapse属性是解决网页中表格边框问题的一个简单而有效的CSS属性。它允许设计师以更简洁的代码实现更加整洁和专业的表格外观,是现代网页设计中不可或缺的一个工具。

    firefox下rowspan+border+border-collapse的bug

    在探讨firefox浏览器下关于表格中使用rowspan属性与边框样式(border)以及边框合并(border-collapse)属性相组合时出现的bug,我们首先需要了解这些HTML和CSS属性的作用。 rowspan属性用于表格单元格(td或th元素...

    gridview生成时如何去掉style属性中的border-collapse

    默认情况下,GridView的`CellSpacing`属性是0,这会使得表格使用`border-collapse: collapse`来处理边框。将`CellSpacing`属性设置为-1,可以取消边框合并。例如: ```xml ...

    给table的tr添加border-top时没有效果的解决方法

    然而,在实际操作中,有时你会发现为`&lt;tr&gt;`元素直接添加`border-top`属性并没有预期的效果,这通常是因为浏览器的默认样式与CSS的`border-collapse`属性有关。本文将详细解析这个问题,并提供解决方案。 当我们在...

    CSS样式Table[3] - practical-css3-tables-with-rounded-corners-demo

    在网页设计中,CSS(Cascading Style Sheets)是一种用于定义HTML或XML(包括SVG、XHTML等)文档中元素外观、布局和结构的重要工具。...总之,CSS3的`border-radius`属性是创建现代化、优雅表格的强大工具。

    css属性索引----帮助你制作html网页

    例如,`border-collapse`属性用于合并表格单元格的边框,`border-color`用于设置边框颜色,`border-style`定义边框样式(如实线、虚线等),而`border-width`则调整边框的宽度。此外,`margin`和`padding`属性分别...

    设置表格的边框是否被合并为一个单一的边框

    其中,“设置表格的边框是否被合并为一个单一的边框”是一个重要的样式控制手段,它主要涉及到CSS中的`border-collapse`属性。 #### 一、`border-collapse`属性详解 `border-collapse`属性用于控制表格单元格之间...

    td无边框处理

    综上所述,通过合理运用CSS的`border-collapse`属性,我们可以轻松地去除`&lt;td&gt;`元素的边框,使表格呈现更加整洁、专业的设计风格。无论是对于初学者还是有经验的开发者来说,掌握这一技巧都是提高网页设计水平的有效...

    【小练习03】CSS-表格(table)--天气预报

    border-collapse: collapse; /* 合并边框 */ width: 100%; /* 全宽度 */ } th, td { text-align: center; /* 文本居中 */ padding: 8px; /* 单元格内边距 */ border: 1px solid #ddd; /* 边框 */ } th { ...

    CSS表格样式1

    通过设置`border`属性,我们可以给表格添加边框。例如: ```css table { border: 1px solid #ccc; } ``` 2. **单元格间距**:`border-collapse`属性用于控制单元格之间的边框是否合并。`collapse`表示合并,`...

    漂亮的表格css+html

    - `border-collapse`属性:用于设置表格边框是否合并,可以创建无间距的整洁表格。 - `border-style`, `border-width`, `border-color`:分别定义边框的样式、宽度和颜色,以定制个性化边框。 - `background-...

    表格样式1

    总的来说,理解并熟练运用`border-spacing`、`border-collapse`以及`vertical-align`等CSS属性,可以帮助你更好地控制HTML表格的视觉效果和布局,提升用户体验。同时,熟悉HTML表格的基本结构和浏览器的自动补全行为...

    CSS属性参考,背景 边界 表格 滚条……

    本文将深入探讨标题中提到的CSS属性,包括背景、边界、表格和滚条,以及描述中提及的文本、显示、相对定位、元素缩放、内容大小和滤镜效果。 1. 背景(Background) - `background-color`: 设置元素的背景颜色。 ...

    表格边框样式大全

    可以通过CSS的`border-style`属性设置为`dashed`来实现。 **代码示例:** ```html style="BORDER-RIGHT: #ff6600 1px dashed; BORDER-TOP: #ff6600 1px dashed; BORDER-LEFT: #ff6600 1px dashed; BORDER-BOTTOM:...

    用css制作极细表格

    ### 使用CSS创建极细边框的表格 #### CSS样式定义 在网页设计中,使用CSS(层叠样式表)来创建美观且具有高度定制性的表格是非常常见的做法。下面将详细介绍如何利用CSS创建一个带有极细边框的表格。 首先,我们...

    css去掉表格内边框.pdf

    在CSS中,可以通过设置`border-collapse`属性为`collapse`来合并相邻单元格的边框,达到去除内边框的效果: ```css table { border-collapse: collapse; } td, th { border: none; } ``` 2. **细边框表格**...

Global site tag (gtag.js) - Google Analytics