table外围边框样式设置

最新推荐文章于 2024-09-09 09:01:46 发布

原创最新推荐文章于 2024-09-09 09:01:46 发布 · 1w 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#jsp #table #tr #border #列表

前端专栏收录该内容

44 篇文章

订阅专栏

本文详细介绍了如何在HTML表格中实现特定边框样式，包括列表、表头和数据行的不同边框效果。通过设置CSS样式，特别是border-collapse, border-top-style, border-bottom-style等属性，作者成功地展示了实线和虚线边框的应用。此外，还讨论了在不同浏览器（如Chrome和IE8）下可能遇到的问题及解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近做一个小系统，在列表页显示数据时，遇到一个问题，我想列表显示效果为下图中效果，

表格外围上下边框、及题头下边框用实线显示，列表中数据边框以虚线显示，但是始终不能实现。后经一个下午的努力，终于实现，现将实现方法贴出。

一、实现步骤

1、对列表、表头、行分别使用样式进行控制；

2、对列表，设置border-collapse为collapse，然后设置border-top-style,border-top-width,border-bottom-style,border-bottom-width属性；

3、对表头及行，均设置border-bottom-style,border-bottom-width属性，但border-bottom-style属性值不同，表头为solid（实线），行为dotted（虚线，及点画线）；

二、代码

1、demo.html源码

<html>
<head>
	<title>table外围边框样式设置demo</title>

	<!-- 页面样式 -->
	<link rel="stylesheet" href="table.css" type="text/css">
	<script type="text/javascript" src="jquery.js"></script>

	<script language="javascript">
		var jquery = $.noConflict();
		jquery(document).ready(function(){
			// 为页面各元素添加样式
			jquery('.table_list').addClass('list');
			jquery('.table_list tbody tr').addClass('dotted');
		});
	</script>
</head>
<body>
	<table class="table_list">
		<thead>
			<tr>
				<th><nobr>A</nobr></th>
				<th><nobr>B</nobr></th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>A1</td>
				<td>B1</td>
			</tr>
			<tr>
				<td>A2</td>
				<td>B2</td>
			</tr>
			<tr>
				<td>A3</td>
				<td>B3</td>
			</tr>
		</tbody>
	</table>
</body>
</html>

二、table.css源码（为作区分，我将表头的底边框线设置为红色）

table.list {
	border-collapse: collapse;
	border-top-style: solid;
	border-top-color: #000000;
	border-top-width: 1px;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #000000;
	font-size: 15px;
}

tr.dotted {
	border-bottom-style: dotted;
	border-bottom-width: 1px;
	border-bottom-color: #000000;
}

th {
	border-bottom: 1px solid #FF0000;
}

三、jquery.js为v1.9.1（demo中仅用到其ready方法，不同版本jquery对其影响不大）

四、运行效果（左侧chrome，右侧IE8）