[转载]Css设置table网格线(无重复）

最新推荐文章于 2023-01-02 16:26:14 发布
最新推荐文章于 2023-01-02 16:26:14 发布
阅读量744 收藏
点赞数
分类专栏： CSS
原文地址：Css设置table网格线(无重复） 作者：依然贰零零柒
效果图：
[转载]Css设置table网格线(无重复）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8" />
<title>table网格线设置</title>
<style type="text/css">
.table{border-collapse:collapse; font-size:13px; height:24px;line-height:24px; color:#09F; text-align:center;}
.table tr th{background:#36F; color:#FFF; font-size:13px;height:24px; line-height:24px;}
.table tr th.th_border{border-right:solid 1px #FFF;border-left:solid 1px #36F;}
.table tr td{border:solid 1px #36F;}
</style>
</head>

<body>
<table width="200" border="0" class="table"cellpadding="0" cellspacing="0">
    <tr>
      <thclass="th_border">标题一</th>
      <thclass="th_border">标题二</th>
      <thclass="">标题三</th>
    </tr>
    <tr>
      <td>内容一</td>
      <td>内容二</td>
      <td>内容三</td>
    </tr>
    <tr>
      <td>内容一</td>
      <td>内容二</td>
      <td>内容三</td>
    </tr>
</table>
</body>
</html>

dcrenl
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css 实现table形式的网格
雾里看花叹朦胧
12-02 1221
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>实现table形式的网格</title> <style> ul,li { list-style: none; margin: 0; padding: 0 }
html表格（详解网页表格的制作）
最新发布
百赢出品，必属精品
04-26 2194
HTML 表格由 标签来定义。HTML 表格是一种用于展示结构化数据的标记语言元素。每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由 标签定义），表格可以包含标题行（）用于定义列的标题。tr：tr 是 table row 的缩写，表示表格的一行。td：td 是 table data 的缩写，表示表格的数据单元格。th：th 是 table header的缩写，表示表格的表头单元格。
table网格线
热门推荐
牟云飞的博客
05-14 1万+
.tabledate{ border: 1px solid black; width: 100%; border-collapse:collapse; } .tddata{ border: 1px solid black; }
CSS网格布局：使用CSS表格显示
cungui5726的博客
08-17 229
The suggestions in this article, written several years ago, have been overtaken by the CSS Grid specification, which will be covered in a new reading list. 几年前写的这篇文章中的建议已被CSS Grid规范取代，该规范将在新的阅读列表中进行介...
CSS给Table加线
weixin_30339457的博客
03-17 242
<style type="text/css"> .stats { width: 480px; border-collapse:collapse;/* 表格相邻边合并*/ } .stats td { border: 1px #000 solid; } </style&g...
从Table向Css过渡的优缺点比较
10-31
从表格布局（Table）向CSS布局过渡是网页设计领域中一个重要的发展变化，这一转变带来了诸多优点和一些挑战。以下是对这种过渡的优缺点的详细分析： 优点： 1. **可维护性提升**：CSS布局使得设计与内容分离，这...
css 横排 实现代码
09-27
`：设置文本对齐方式为左对齐，这在没有特定内容时默认情况，但在这里可能是为了与`.table_tile_`的右对齐形成对比。 - `height: 20px;`：设定元素的高度为20像素，确保所有单元格在同一水平线上。 - `width: 25%;...
用div+css模拟表格对角线
03-16
在网页设计中，使用`div`和`CSS`来模拟表格对角线是一种常见的技术，尤其是在需要自定义样式或者在不支持`<table>`元素的环境中。本篇将详细讲解如何利用`div`和`CSS`实现这一效果，并通过提供的`demo.html`文件中的...
CSS3动画属性边框属性等
11-22
`background-attachment` 控制背景图片是否固定，`background-color` 设置背景色，`background-image` 设置背景图片，`background-position` 定义图片初始位置，`background-repeat` 控制图片重复模式，而 `...
表格通过div+css现实对角线列表功能
09-12
2. **宽度和高度**：为`div`元素设置合适的宽度和高度，以适应内容并创建网格状结构。 3. **边框**：使用`border`属性添加边框，可以模拟表格的线条。通过调整边框的宽度、颜色和样式，可以达到理想的效果。 4. **...
html表格边框去重复,css怎么解决表格边框线重复问题.
weixin_35926446的博客
07-03 945
1、td的边框和table的边框重叠.table{border-left:1pxsolid#dedede;border-top:1pxsolid#dedede;}.td{border-right:1pxsolid#dedede;border-bottom:1pxsolid#dedede;}table只用左边框和上边框，每个td只有右边框和下边框，效果就是整个表格左、上边框是连续实线，右、下边框是延...
Tableau工作表区域中各种参考线、网格线等的设置
读万卷书 行万里路
05-28 7434
Tableau的工作表区域中可以设置各种网格线、参考线、零值线、趋势线、轴标尺等，这些线型的设置很简单，通过【设置格式】(在工作表空白区域右击)中的【设置边界格式】及【设置线格式】进行设置即可。
html无边框网格,table没有网格线_html/css_WEB-ITnose
weixin_34370877的博客
06-15 1692
突然发现，为什么table没有网格线呢？怎么设置？回复讨论(解决方案)table{ border:1px solid #515151; border-collapse:collapse;}table tr td{ border-bottom:1px solid #515151; border-right:1px solid #515151;;line-height:23px; empty-cell...
【css table表格边框设置不重叠】
m0_55546349的博客
11-16 935
【css table表格边框设置不重叠】
table边框改为细线
.NET 人工智能实践
07-23 1468
table边框改为细线
Table布局 flex布局 grid布局
m0_70146580的博客
01-02 1269
table布局 flex布局 grid布局
HTML学习之路-03HTML表格、table布局
weixin_63204687的博客
08-20 3395
使用传统布局的案例以及相关知识
css grid布局显示网格线
01-11
CSS Grid布局可以通过设置`grid-template-columns`和`grid-template-rows`属性来显示网格线。下面是一个示例： ```css .container { display: grid; grid-template-columns: 100px 100px 100px; grid-template-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值