怎样用CSS设置table第一列样式

你编写表格的时候可以这样：

把第一列变成th

，这样就可以方便的控制了。

例如：三行三列的表格可以这样写：

&lttable&gt

&lttbody&gt

&lttr&gt

&ltth&gt&lt/th&gt

&lttd&gt&lt/td&gt&lttd&gt&lt/td&gt

&lt/tr&gt

&lttr&gt

&ltth&gt&lt/th&gt

&lttd&gt&lt/td&gt&lttd&gt&lt/td&gt

&lt/tr&gt

&lttr&gt

&ltth&gt&lt/th&gt

&lttd&gt&lt/td&gt&lttd&gt&lt/td&gt

&lt/tr&gt

&lt/tbody&gt

&lt/table&gt

或者你可以分别设置不同的类来达到控制的目的。

CSS可以这样写

th{

width:100px

}

td{

width:200px

}

【css】table-border样式小结

创建和插入例子，按需自改

/** * 创建表格 * id 为表格id * arr 为表格表头 */ function createTable(id,arr){ var table = document.createElement(’table’) table.setAttribute(”id”,id) table.setAttribute(”className”,”TableLine”)//设定样式 table.setAttribute(”width”,’98%’) table.setAttribute(”cellpadding”,’3’) table.setAttribute(”cellspacing”,’0’) var row = table.insertRow() row.style.setAttribute(”backgroundColor”,”#e0e0e0”) for (var i = 0i &ltarr.lengthi++) { var col = row.insertCell() if(i==0){ col.setAttribute(”width”,’3%’) } col.setAttribute(”className”,”border:1px solid #9BC2E0”) col.setAttribute(”align”,”center”) col.style.fontSize=”13px” col.style.fontWeight=”Bold” //var style = document.createAttribute(”styles”) //style.nodeValue = ”font-size:large” //col.setAttributeNode(style) col.innerHTML = arr[i] } //alert(table.outerHTML) return table }

/** * 向表格插入一行 */ function addRow(table,id,arr){var row = table.insertRow() row.setAttribute(”id”,id) row.onclick=function (){} for(var i=0i&ltarr.lengthi++){ var col = row.insertCell() col.innerHTML = arr[i] //col.innerText = arr[i] col.setAttribute(”title”,arr[i]) } }

HTML中有多个table怎么在css中定义TD不同的样式？

内嵌标签： thead (可选)、 tbody (可选)、td、tr、colgroup 、 caption (可选)

属性：align ，bgcolor ，bordercolor，border ，cellpadding ，cellspacing ，frame ，width ，summary ，rules 。

现在的table的属性基本已经过时，都使用css进行设置table样式。

1.border-collapsecollapse | separate

collapse : border线合并

separate： border线分隔，默认属性

ps: 使用collapse 此属性时， border-spacing 、empty-cells和 border-radius 失效 ，无任何效果。

2.border-spacinghorizontal &ltlength &gt| vertical &ltlength &gt

3.vertical-align 设置内容与图片位置

4.table-layout auto | fixed

ps: auto 表格布局自适应宽度

fixed 表格布局固定宽度，文字内容等可能会溢出

5.caption-side 针对于caption标签的css样式设置

6.empty-cells 但单元格内无内容时候，可设置隐藏

参考：

https://www.sitepoint.com/community/t/table-format-using-css-border-issue/36882/3

border-collapse

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Table

flex: 1对table样式的影响

设置每个table的样式，比如class=tab1，class=tab2，然后在样式表设置

.tab1 td{这里为tab1的样式}

.tab2 td{这里为tab2的样式}

而不用一个个去设置td 了 毕竟比较麻烦。

如下代码：

&lttable &gt

&lttd &gt内容&lt/td &gt

&lt/table &gt

&lttable &gt

&lttd &gt内容&lt/td &gt

&lt/table &gt

在CSS中定义:

.style1 {

}

.style2 (

}

或者是给TD加上class，相同样式用的相同Class，不同样式用的不同Class

table父元素是一个div，div有flex: 1的样式，这个样式很可能会影响table的样式。

我的需求是用antd ui做一个2列禁锢的表格table，但是发现怎么写，表格禁锢都不起作用，活动的table列也没有滚动条，于是给父div再加一个overflow：auto变成：flex:1overflow: auto

就可以解决问题。

以上就是关于怎样用CSS设置table第一列样式全部的内容，如果了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！

更多相关资讯