本文目录一览：
- 1、【React_Antd】Table样式修改
- 2、怎样用CSS设置table第一列样式
- 3、HTML中有多个table怎么在css中定义TD不同的样式？
- 4、【css】table-border样式小结
- 5、js怎样获得table样式
【React_Antd】Table样式修改
React项目中，使用antd中的Table组件，其样式略有些死板。下面记录一些常见的样式修改问题，及解决方法。
一共有三种方法。
React定义columns的时候，title属性的值，可以是dom。所以在这儿添加div就可以了。其样式会覆盖table原本的背景。
扣一张矩形的背景透明的斜线图片出来，作为表头所在div的背景。这样，当表头所在div发生变化时，背景图片也会随着变化。
缺点 ：
线的粗细也会发生变化。变化幅度小时不明显，如果拉得特别大，线会变粗，像素可能会不够。
其他 ：
Svg图片不知道可不可以。。。
建议从这里抄作业：
注意每个属性的后面有逗号，颜色自己改
直接对背景div添加斜线，上层要显示的内容，做好排版即可
如果表头有两个，那么也可以看成是4个拼在一起
第2和第3块显示内容，第1和第4块显示斜线，也可以
直接一个div，高度设为1px，你就能得到一条直线了（也可以把div的某一条border边框作为直线)。通过css中的旋转属性，即可得到斜线。
每个column，利用其title.length*18+20作为其width值，每一列的宽度都能自适应其表头字数。
但是如果要让列宽适应于非表头部分，可能还要另想办法
Scollar属性中的x设置为＂max-content＂
每一列width根据title长度动态生成
Scollar属性中的y设置为true，再在样式文件中，设置其max-height。
这样做的好处是，max-height的大小可以根据其父组件的高度自适应。适用于某些情况
怎样用CSS设置table第一列样式
你编写表格的时候可以这样：
把第一列变成th
，这样就可以方便的控制了。
例如：三行三列的表格可以这样写：
table
tbody
tr
th/th
td/tdtd/td
/tr
tr
th/th
td/tdtd/td
/tr
tr
th/th
td/tdtd/td
/tr
/tbody
/table
或者你可以分别设置不同的类来达到控制的目的。
CSS可以这样写
th{
width:100px;
}
td{
width:200px;
}
HTML中有多个table怎么在css中定义TD不同的样式？
设置每个table的样式，比如class=tab1，class=tab2，然后在样式表设置
.tab1 td{这里为tab1的样式}
.tab2 td{这里为tab2的样式}
而不用一个个去设置td class="xx"了 毕竟比较麻烦。
如下代码：
table
td class="style1" 内容 /td
/table
table
td class="style2" 内容 /td
/table
在CSS中定义:
.style1 {
}
.style2 (
}
或者是给TD加上class，相同样式用的相同Class，不同样式用的不同Class
【css】table-border样式小结
内嵌标签： thead (可选)、 tbody (可选)、td、tr、colgroup 、 caption (可选)
属性：align ，bgcolor ，bordercolor，border ，cellpadding ，cellspacing ，frame ，width ，summary ，rules 。
现在的table的属性基本已经过时，都使用css进行设置table样式。
1.border-collapse collapse | separate
collapse : border线合并
separate： border线分隔，默认属性
ps: 使用collapse 此属性时， border-spacing 、empty-cells和 border-radius 失效 ，无任何效果。
2.border-spacing horizontal length | vertical length
3.vertical-align 设置内容与图片位置
4.table-layout auto | fixed
ps: auto 表格布局自适应宽度
fixed 表格布局固定宽度，文字内容等可能会溢出
5.caption-side 针对于caption标签的css样式设置
6.empty-cells 但单元格内无内容时候，可设置隐藏
参考：
js怎样获得table样式
创建和插入例子，按需自改
/** * 创建表格 * 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 = 0; i arr.length; i++) { 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; } -table样式
/** * 向表格插入一行 */ function addRow(table,id,arr){ var row = table.insertRow(); row.setAttribute("id",id); row.onclick=function (){}; for(var i=0;iarr.length;i++){ var col = row.insertCell(); col.innerHTML = arr[i]; //col.innerText = arr[i]; col.setAttribute("title",arr[i]); } }-table样式
