将html表转换为css

我试图将我的代码从表更改为仅css。 我想包括工作表当前具有的所有function，包括：

单击时更改背景颜色，

限制点击的单元格数量

并显示已单击的单元格。

我有一小部分已完成，无法弄清楚其余部分。 感谢您的帮助。

这是小提琴： https ： //jsfiddle.net/blueberrymuffin/h18yr46a/16/我目前的代码如下：

CSS：

table td { width:25px; height:25px; text-align:center; vertical-align:middle; background-color:#ccc; border:1px solid #fff; } table td.highlighted { background-color:#999; } .css-table { display: table; background-color:#ccc; width: 80px; } .css-table-tr { display: table-row; } .css-table-td { display: table-cell; border:1px solid #fff; width: 30px; height:30px; text-align:center; vertical-align:middle; } 

jQuery的

 jQuery('table').on('click', function (e) { var ourTable = jQuery(e.target).closest('table'); var sCount = ourTable.find('.highlighted').length; console.log(ourTable, sCount, $(e.target).hasClass('highlighted')); if (sCount < 4 || $(e.target).hasClass('highlighted')) { $(e.target).toggleClass("highlighted"); } e.preventDefault(); }); jQuery('#tableinfo').on('click', function (e) { var selected = new String(); jQuery('.highlighted').each(function() { selected += $(this).attr('id')+" "; }); alert("these cells have been selected: " + selected); }); 

HTML

 
 
 
a
 
b
 
c
 
 
 
d
 
e
 
f
 
 
 
g
 
h
 
i
 
 
 
 
 
 
a
 
b
 
c
 
 
 
d
 
e
 
f
 
 
 
g
 
h
 
i
 
 
 
  
 
 
 
 
a
 
b
 
c
 
 
 
d
 
e
 
f
 
 
 
g
 
h
 
i
 
 
 
 
 
 
a
 
b
 
c
 
 
 
d
 
e
 
f
 
 
 
g
 
h
 
i