CSS table 单行布局

最新推荐文章于 2023-03-29 17:55:26 发布
最新推荐文章于 2023-03-29 17:55:26 发布
阅读量1.5k 收藏
点赞数
分类专栏： ASP.NET学习(知识积累)
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lai123wei/article/details/10431165
版权
这篇博客探讨了如何使用CSS实现表格的单行布局，包括设置表格边框和单元格背景色。通过示例代码，展示了如何通过`border-collapse`属性控制边框合并，以及如何使用`background`属性交替改变表格行的背景色，创建视觉效果。

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

<html>
<head>
 <mce:style type="text/css"><!--
  table{border-collapse:collapse;}
  td{border:1px blue solid;}
 
--></mce:style>
<style type="text/css" mce_bogus="1">  
  table{border-collapse:collapse;}
  td{border:1px blue solid;}
</style>
</head>
<body>
 <br/><br/><br/><br/>
 <table width="50%" align="center">
  <tr>
      <td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td>
  </tr>
  <tr>
      <td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td>
  </tr>
  <tr>
      <td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td>
  </tr>
  <tr>
   <td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td>
  </tr>
  <tr>
      <td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td>
  </tr>
 </table>
</body>
</html>
<!-- table与tr背景色反色方式 -->
<html>
<head>
 <mce:style type="text/css"><!--
  table{background:#0000FF;}
  tr{background:#FFFFFF;}
 
--></mce:style><style type="text/css" mce_bogus="1">  
      table{background:#0000FF;}
      tr{background:#FFFFFF;}
 </style>
</head>
<body>
 <br/><br/><br/><br/>
 <table width="50%" align="center" cellspacing="1">
  <tr>
   <td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td>
  </tr>
  <tr>
   <td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td>
  </tr>
  <tr>
   <td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td>
  </tr>
  <tr>
   <td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td>
  </tr>
  <tr>
   <td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td>
  </tr>
 </table>
</body>
</html>

//改成下面的写法

table
        {
            background: #0000FF;
            border-spacing: 1px;
        }
        tr
        {
            background: #FFFFFF;
        }

WEB基础之：CSS表格布局 Table Layout
f_carey的博客
12-25 2182
表格布局 Table Layout1. 表格式化1.1 表编排规则1.2. 表显示值1.2.1 列1.3 匿名表对象1.3.1 对象插入规则1.4 表层1.5 表标题2. 表单元格边框2.1 合并或分隔单元格边框2.2 边框间隔2.3 处理空单元格2.4 合并单元格边框2.4.1 合并单元格边框规则3. 表大小3.1 宽度3.2 高度3.3 对齐3.3.1 行内元素的值3.3.2 表格单元格的值 1. 表格式化 1.1 表编排规则 每个行框包含一行表格单元。表中的所有行框按其在源文档中出现的顺序从上到下地
CSS之Flex布局的详细解析
最新发布
qq_69748833的博客
10-19 2689
添加一个。
CSS table 单行布局示例代码
11-30
复制代码代码如下: <html> <head> <mce type=”text/css”><!– table{border-collapse:collapse;} td{border:1px blue solid;} –></mce> <style type=”text/css” mce_bogus=”1″> table{border-collapse:collapse;} td{border:1px blue solid;} </style> </head> <body> <br><br><br><br> <table width=”50%” align=”c
CSS表格table
unique_huan的博客
03-29 326
...
HTML-table单行操作
Bigbig_lyx的博客
01-11 1526
&lt;div class="row m-b-sm m-t-sm" style="padding-top: 10px;"&gt; &lt;div class="col-sm-12 form-horizontal"&gt; &lt;label class="col-sm-2 control-label"&gt;具体事项&lt;/label&gt;&lt
css如何固定table第一行_CSS 面试知识点总结三
weixin_39723010的博客
11-29 831
1、margin 无效的情形(1)display计算值inline的非替换元素的垂直margin是无效的。对于内联替换元素，垂直margin有效，并且没有margin合并的问题。(2)表格中的和元素或者设置display计算值是table-cell或table-row的元素的margin都是无效的。(3)绝对定位元素非定位方位的margin值“无效”。(4)定高容器的子元素的margin...
css经典全布局
weixin_44667463的博客
02-20 1625
css经典超全布局
表格——html
mantou_riji的博客
04-14 953
文章目录表格的基本元素横向合并colspan纵向合并rowspan长表格th表格样式border-spacing控制边框之间的距离border-collapse设置边框一行一个元素注意垂直居中利用table-cell使元素垂直居中 表格的基本元素 使用table标签来创建一个表格。 tr标签表示表格中的一行 td标签表示表格中的一个单元格 eg： <!DOCTYPE html> <html lang="en"> <head> <meta charset=
eelement-ui的表格首行单独占一行
m0_47630333的博客
06-10 2914
<template> <el-row> <el-col :span="24"> <el-card> <global-title title="结算执行月报"> <div class="flex-align-center" slot="append"> <el-popover content="注：本表统计以输变电工程为口
2021-06-01
qq_46852402的博客
06-01 945
目录标题HTML基本知识1.HTML标签分类，定义及用法2.块级元素与行内元素的区别3.实体元素4.相对路径和绝对路径的区别5.超链接和图片标签6.列表 HTML基本知识 1.HTML标签分类，定义及用法 <a> 标签定义超链接，用于从一张页面链接到另一张页面。 <a> 元素最重要的属性是 href 属性，它指示链接的目标。 基本结构标签: <HTML>,表示该文件为HTML文件 <HEAD>,包含文件的标题,使用的脚本,样式定义等
HTML中Table标签的属性及应用
m0_58514898的博客
06-02 942
html table的表格属性： 1、 属性 1.width：设置表格宽度 2.height：设置表格高度 3.align：设置 表格 在其 父元素中的水平对齐方式，取值：left,center,right 4.border：边框,边框宽度，以px为单位的数值，px可以省略 ...
纯CSS（基于CSS3）实现表格固定行列（附：样式与JS配置实现固定列行）
timfeng2009的专栏
09-09 2740
方法一、CSS3（position:sticky）实现固定行与列 这个是我正在使用的固定行列的方式，使用的新最的CSS3样式：position:sticky。 感觉上去这个样式与position:fixed非常像。 差异在两个地方：1、但是fixed是相对于body元素，而sticky是相对于（第一个定位不为static的）父级容器；2、虽然已经定位position起来了，但是仍然还是在原来...
HTML table标签的用法
anderlaw的博客
08-20 3055
table是一个比较古老的标签,它有很多自己的特性 table不会独占一行。需要主动设置其宽度，一般设置为100%，单元格会自动平均排列. talbe可以设置 有三种边框，一种是最外层的table元素上的，一种是tr元素上的，一种是td元素上的。可以通过设置style来实现，table元素也可以通过设置border属性设置。一般我们仅仅设置td的边框，设置table的边框为0； 边框的合并。...
html中实现table表格一行多列
热门推荐
奔跑的菜鸡
03-22 1万+
table用法
nate的专栏
06-08 1362
--getn获取元素的个数 player ={ {name = "yangchun",id = "100000001"}, {name = "dlnuchunge",id = "100000002"}, {name = "nate",id = "100000003"}, } player[6] = {name = "666",id
块元素默认独占一行
mykktian的博客
07-02 2928
问题背景描述： 在一个table中中隐藏了一个级联的下拉选择框，在调用某个方法时让其显示时，下拉框在原来的下方出现。 解决办法： obj.style.display = "[color=red]inline[/color]-block" ; inline 是关键...
CSS布局居中技巧全解析
"CSS布局居中" CSS布局居中是网页设计中常见的需求，涉及多种方法，包括简单和复杂的策略。以下是一些常见的CSS居中技术： 1. **margin设置为auto** 这种方法适用于水平居中。将元素的`margin-left`和`margin-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值