`
happyzpx
  • 浏览: 29284 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

table中如何用CSS控制<tr>><td>的宽度和高度

    博客分类:
  • css
css 
阅读更多

table中如何用CSS控制<tr>><td>的宽度和高度

给table设置一个mian
代码如下
<style type="text/css">
.main td{ height:30px; border:#CCCCCC 1px solid;}
</style>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="main">
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
 
</table>
.main td的意思是指定main类下的td,同理也可以指定tr
这样的做法只能针对了设定main类的表格,若是想要所有的表格都是同一个高度样式可以这样写
<style type="text/css">
table td{ height:30px; border:#CCCCCC 1px solid;}
</style>
注意的是table前不要加点,因为他不是类名,而是html元素
希望对你有所帮助
分享到:
评论

相关推荐

    利用CSS控制表格table的交替颜色

    &lt;tr&gt;&lt;td&gt;3&lt;/td&gt;&lt;td&gt;3&lt;/td&gt;&lt;td&gt;3&lt;/td&gt;&lt;td&gt;3&lt;/td&gt;&lt;td&gt;3&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;4&lt;/td&gt;&lt;td&gt;4&lt;/td&gt;&lt;td&gt;4&lt;/td&gt;&lt;td&gt;4&lt;/td&gt;&lt;td&gt;4&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;5&lt;/td&gt;&lt;td&gt;5&lt;/td&gt;&lt;td&gt;5&lt;/td&gt;&lt;td&gt;5&lt;/td&gt;&lt;td&gt;5&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; ``` 此...

    table标签使用方法

    使用&lt;thead&gt;、&lt;tbody&gt;、&lt;tfoot&gt; 在HTML5中,推荐使用`&lt;thead&gt;`、`&lt;tbody&gt;`和`&lt;tfoot&gt;`来组织表格内容,以增强表格的语义性和可访问性。 - **&lt;thead&gt;**: 表格的表头部分。 - **&lt;tbody&gt;**: 表格的主体部分。 - **...

    HTML table的使用

    第二行和第三行`&lt;tr&gt;`使用`&lt;td&gt;`元素,表示数据行。 为了使表格更具可读性,可以使用`&lt;caption&gt;`标签添加表格标题,`&lt;colgroup&gt;`和`&lt;col&gt;`用于设置整列的样式,例如宽度。同时,`&lt;tbody&gt;`和`&lt;tfoot&gt;`可以分别用于...

    HTML表格.docx

    通过学习和掌握`&lt;table&gt;`、`&lt;tr&gt;`、`&lt;td&gt;`、`&lt;th&gt;`等标签以及相关的属性,开发者可以创建出满足需求的复杂表格,并结合CSS进行美化和增强功能。在网页设计中,熟练运用HTML表格对于提升用户体验和信息传达效率至关...

    Css padding和margin区别

    这个一个CSS padding和margin的例子,对初学者很有帮助的哦~ .divcss3{border:1px solid #F00;... &lt;tr&gt;&lt;td&gt;test数据&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;test数据&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;test数据&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;/div&gt;

    网站首页信息展示

    - 使用`&lt;tr&gt;`和`&lt;td&gt;`组合来放置所需的图片。 4. **第4行**:展示热门商品。 - 使用一个2行7列的表格来展示热门商品。 - 每个商品占据一列,两行用来展示更多的商品信息或图片。 5. **第5行**:放置广告图片。 ...

    隔行变色和鼠标滑过变色

    &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;1&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;3&lt;/td&gt;&lt;td&gt;3&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;4&lt;/td&gt;&lt;td&gt;4&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;5&lt;/td&gt;&lt;td&gt;5&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; ``` 在这段代码中,通过`...

    第6章 表格元素.pdf

    使用&lt;tbody&gt;元素可以将表格中的主体内容部分包裹起来,有助于CSS和JavaScript的控制。 示例代码如下: ```html &lt;table&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;张三&lt;/td&gt; &lt;td&gt;男&lt;/td&gt; &lt;td&gt;未婚&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;李四&lt;/td&gt; ...

    html中table的表格样式

    对于复杂的表格布局,可以使用`&lt;tr&gt;`、`&lt;td&gt;`的`colspan`和`rowspan`属性来合并单元格。例如: ```html &lt;tr&gt; &lt;td colspan="2"&gt;合并两列&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td rowspan="2"&gt;跨越两行&lt;/td&gt; &lt;td&gt;普通单元格&lt;/td&gt; &lt;/...

    table只显示横行、枞行

    &lt;tr&gt;&lt;td&gt;aaaa&lt;/td&gt;&lt;td&gt;aaaa&lt;/td&gt;&lt;td&gt;aaaa&lt;/td&gt;&lt;td&gt;aaaa&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; ``` - **`&lt;colgroup&gt;`**:将列分组,可以对整组列应用相同的样式。 - **`span`属性**:指定列组所包含的列的数量。 - **`rules="groups...

    td 内容自动换行 table表格td设置宽度后文字太多自动换行

    在使用table展示内容时,经常会出现内容过长超出了单元格(td)的宽度,导致无法完整展示全部内容的情况。传统的table布局常常会导致内容溢出,影响页面的整体美观性。本篇文章针对的就是这个常见的问题,即如何设置...

    表格 html 表格 html 表格 html

    此标签是一个容器,里面可以包含行(`&lt;tr&gt;`)和单元格(`&lt;td&gt;`)。表格的基本结构如下: ```html &lt;table&gt; &lt;tr&gt; &lt;td&gt;单元格内容&lt;/td&gt; &lt;td&gt;单元格内容&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;单元格内容&lt;/td&gt; &lt;td&gt;单元格内容&lt;/...

    html 表单排序

    而当我们谈论`&lt;table&gt;`表单排序时,我们通常是指如何对`&lt;table&gt;`中的数据行进行升序或降序排列,以便用户可以更有效地浏览和分析信息。这在大型数据集或动态更新的数据中尤其有用。 ### 1. `&lt;table&gt;`的基本结构 一...

    JSP+Struts+JSTL+EL新闻发布系统jsp

    &lt;TD width="95%" height=1216&gt; &lt;TABLE cellSpacing=0 cellPadding=0 width="100%" border=0&gt;&lt;TBODY&gt; &lt;TR&gt; &lt;TD colSpan=2&gt; &lt;TABLE cellSpacing=0 cellPadding=0 width="100%" border=0&gt; &lt;TBODY&gt; &lt;TR&gt; &lt;TD ...

    第八次 网页制作表格应用

    通过为`&lt;table&gt;`、`&lt;tr&gt;`、`&lt;td&gt;`等标签添加类或ID,可以实现更精细的控制: ```css .table-style { border-collapse: collapse; /* 合并单元格边框 */ border: 1px solid #000; } .table-style td { padding: ...

    Web程序开发:第6章 表格.pptx

    &lt;tr&gt;&lt;td&gt;January&lt;/td&gt;&lt;td&gt;$100&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;February&lt;/td&gt;&lt;td&gt;$80&lt;/td&gt;&lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; ``` **6.7 实例 - 个人简历** 创建一个简单的个人简历表格,可以包括姓名、年龄、性别、联系方式等信息,...

    使用HTML开发商业网站-创建表格课件.pptx

    表格的每一行由`&lt;tr&gt;`(table row)元素定义,它包含了一个或多个单元格`&lt;td&gt;`(table data cell)或者表头单元格`&lt;th&gt;`(table header cell)。例如: ```html &lt;tr&gt; &lt;td&gt;数据1&lt;/td&gt; &lt;td&gt;数据2&lt;/td&gt; &lt;/tr&gt; ``` ...

    HTML5创建表格.pdf

    在 HTML5 中,我们可以使用多种方式来创建表格,例如使用 &lt;table&gt;、&lt;tr&gt; 和 &lt;td&gt; 元素,也可以使用 CSS 来样式化表格。HTML5 中的表格创建功能非常强大,能够满足各种复杂的表格需求。 在实际应用中,HTML5 创建...

    2022年HTML相关知识点表格标签(1).pptx

    `&lt;tr&gt;&lt;td&gt;张东健&lt;/td&gt;&lt;td&gt;男&lt;/td&gt;&lt;td&gt;18&lt;/td&gt;&lt;td&gt;计算机&lt;/td&gt;&lt;/tr&gt;` 5. 表格的列控制 可以使用 `&lt;colgroup&gt;` 标签来控制表格的列,例如: `&lt;colgroup span="4"&gt;&lt;/colgroup&gt;` 可以使用 `&lt;col&gt;` 标签来控制表格的...

    html网页布局PPT教案.pptx

    在HTML中,表格由&lt;TABLE&gt;标签定义,&lt;TR&gt;用于创建行,&lt;TD&gt;用于创建单元格。表格的基本结构如下: ```html &lt;TABLE border="1"&gt; &lt;TR&gt; &lt;TD&gt;单元格内容&lt;/TD&gt; ... &lt;/TR&gt; ... &lt;/TABLE&gt; ``` 其中,`border`属性设置...

Global site tag (gtag.js) - Google Analytics