使用CSS给表格添加边框的代码问题

使用CSS给表格添加边框的代码问题,第1张

这是因为你css写的问题,你写的css,对所有页面的table标签都加样式了。

解决方案:

把你添加进去的表格,放在div标签里头,

<div class="mystyle"><table></table>(这里是你复制进来的代码)</div>然后你css代码这么写:<style type="text/css"> 

mystyle table 

border-collapse: collapse; 

border: none; 

mystyle td 

border: solid #000 1px; 

</style>

var data = [],container = documentgetElementById('example'),hot = new Handsontable(container, { data: data, minSpareRows: 20,//显示空白行数 colHeaders: true,//是否显示表格头部字母表 contextMenu: true,//右键显示更多功能 rowHeaders: true,//是否显示列数字 manualColumnResize: true,//自定义列高 manualRowResize: true,//自定义行宽 manualColumnMove: true,//是否能拖动列 manualRowMove: true,//是否能拖动行 columnSorting:true, //false/对象 //当值为true时,表示启用排序插件 // className: "htCenter", //表格文字对其方式 htCenter,htLeft, htCenter, htRight, htJustify, htTop, htMiddle, htBottom // currentRowClassName: 'currentRow',//定义th与td样式,更精准的锁定点击点 // currentColClassName: 'currentCol', // autoWrapRow: false, colWidths: 110,//列宽px,定义之后文字自动换行 columns: [//每一个对象对应一列 { // data: '列号自定义名称',//列号自定义名称,使用colHeaders之后不起作用 // readOnly: true,//是否是可读 type: 'numeric', format: '0,000',// format: '$0,000', language: 'en', }, { type: 'date', dateFormat: 'YYYY-MM-DD', correctFormat: true, defaultDate: '2008-05-01', },{对应每个标题},{},{},{},{},{},{},{}, ], });

这个是正确的写法,被我注释掉的不能写在CSS样式表中。不懂可以HI我

<style type="text/css">

table {

font-size: 12px;

background:#f6fbff;

/bgcolor:#f6fbff;/

border:1;

bordercolor:#a9ccde;

/cellpadding:0; /

/cellspacing:0; /

width:80%;

/align:center;/

text-align:center;

/styletext-align:center;/

border-spacing:0;

border-collapse:collapse;

/font-size:inherit;/

}

</style>

这是css

<table class="table">

<tr>

<td>公告序号</td>

<td>公告标题</td>

<td>发布人</td>

<td>发布时间</td>

<td>管理 *** 作</td>

</tr>

</table>

table{

background-color:#000000;表格背景颜色

background-image:url;背景

background-position:center;内容位置设定

border:1px;

边框宽度

border-color:#000000;

边框颜色

}

有好多呢

属性

在编辑器

可以看看的

下面来个例子,你可以复制到你的编辑器里修改测试

<style type="text/css">

tablegridtable {}{

    font-family: verdana,arial,sans-serif;

    font-size:11px;

    color:#333333;

    border-width: 1px;

    border-color: #666666;

    border-collapse: collapse;

}

tablegridtable th {}{

    border-width: 1px;

    padding: 8px;

    border-style: solid;

    border-color: #666666;

    background-color: #dedede;

}

tablegridtable td {}{

    border-width: 1px;

    padding: 8px;

    border-style: solid;

    border-color: #666666;

    background-color: #ffffff;

}

</style>

<!-- Table goes in the document BODY -->

<table class="gridtable">

<tr>

    <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>

</tr>

<tr>

    <td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>

</tr>

<tr>

    <td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>

</tr>

</table>

CSS(层叠样式表)级联样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11677235.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-17
下一篇 2023-05-17

发表评论

登录后才能评论

评论列表(0条)

保存