table设置样式

1.css设置样式

 td{
  border:solid #add9c0; 
  border-width:0px 1px 1px 0px;
}
    table{
        border:solid #add9c0;
        border-width:1px 0px 0px 1px;
        border-collapse: collapse;        
}

2.动态设置样式

let tables = document.getElementById('container').querySelectorAll('table')
            for (let i = 0; i < tables.length; i++) {
                let table = tables[i]
                // table.setAttribute('border', '1')
                table.style.borderCollapse = 'collapse'
                table.style.width = '100%'
                table.style.textAlign = 'left'
                table.style.border = 'solid #dddddd'
                table.style.borderWidth = '1px 0px 0px 1px'
                let rows = table.rows
                for (let i = 0; i < rows.length; i++) {
                    for (let j = 0; j < rows[i].cells.length; j++) {    // 遍历该行的 td
                        let td = rows[i].cells[j]
                        td.style.border = 'solid #dddddd'
                        td.style.padding = '0 10px 0 10px'
                        td.style.borderWidth = '0px 1px 1px 0px'
                    }
                }
            }

image.png