ul li implement table problem_html/css_WEB-ITnose

css

我想用ul+li实现表格功能，代码如下
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
  98c9421c7db1f7eb3d915dd2dc725c1b
  765e176a032c4523213e00995b95d686
  06fae5558f3e33f0b8de8371a901acb5
  c9ccee2e6ea535a969eb3f532ad9fe89
   ul {
   list-style:none;
   width:100%;
   border:solid 2px red;
   border-bottom-width:0px;
   border-left-width:0px;
   }
   li {
   float:left;
   width:10%;
   border:solid 2px red;
   border-right-width:0px;
   border-top-width:0px;
  
   }
  531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
32d38427aad140eae0694328899c66a6
dc6dce4a544fdca2df29d5ac0ea9906b

a803397044593af7a4d90e952f5c41ca
25edfb22a4f469ecb59f1190150159c6aaabed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6bbbbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6cccbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6dddbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6eeebed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6fffbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6gggbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6hhhbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6iiibed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6jjjbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6kkkbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6lllbed06894275b65c1ab86501b08a632eb

929d1f5ca49e04fdcb27f9465b944689
16b28748ea4df4d9c2150843fecfba68
f5a47148e367a6035fd7a2faa965022e

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
There are 10 columns in each row. The problem now is that the last row has less than 10 li, and there are only 10 li in the last row. There will be empty space, which looks ugly. How to make up for it? It is best to use CSS method to solve it

Reply to the discussion (solution)

Generate empty li to fill it up

No, I use li to display The data is because I may want to delete li. If I use table, it cannot be done that after deleting a piece of data, the following cells will be automatically filled forward, so I thought of using li to do it. If I use an empty li, add When deleting, you need to delete extra empty li's. When deleting, you need to add missing empty li's. You also need to count whether there are more than 10 empty li's. It's too troublesome, so I want to use css to solve the problem.

CSS seems to be unable to solve the problem. , only JS can make the judgment.

No need for the border of ul, just add the border of li directly

Is there any expert?

ul {
list-style:none;
border-left:solid 2px red;
border-top:solid 2px red;
width:100%;
}
li {
float:left;
width:10%;
border-right:solid 2px red;
border-bottom:solid 2px red;
}

Add this not recommended method

*{margin:0;padding:0}

No, the last row of cells is not filled in

Experts please help!

Does anyone know?

I have a very shameless method, background pictures. Draw a line of table wireframe, repeat it vertically, and use it as the entire background image, and then cancel all LI borders and so on.

Master the LI spacing and line spacing yourself, and put all the data into the "cells" of the background image.

Then you can use JS to add or delete your LI as much as you like. If you delete them all, this table is also there.

Obviously it cannot be solved with css alone. CSS is always just for performance and cannot make judgments.

I have a very shameless method, background pictures. Draw a line of table wireframe, repeat it vertically, and use it as the entire background image, and then cancel all LI borders and so on.

Master the LI spacing and line spacing yourself, and put all the data into the "cells" of the background image.

Then you can use JS to add or delete your LI as much as you like. If you delete them all, this table is also there.
This method can be tried but it needs to be modified. It's not a line of background drawn, but a whole night or a whole block of yours. In addition, when making a background image, you should pay attention to the stretched size of the background image, so your height should be fixed. Pay attention to this yourself. Otherwise, the row height will also change after the background is stretched

There is no way to do it, it is shameless. As long as it solves the problem. In fact, this idea is quite unique.

I have a very shameless method, background pictures. Draw a line of table wireframe, repeat it vertically, and use it as the entire background image, and then cancel all LI borders and so on.

Master the LI spacing and line spacing yourself, and put all the data into the "cells" of the background image.

Then you can use JS to add or delete your LI as much as you like. If you delete them all, this table is also there.

It’s too troublesome. The original purpose is to be lazy, but doing so makes it more and more complicated.

Let’s ask experts to help.

Use table js to add and delete td.

I guess the js code will be used soon!

I guess the js code will be used soon!

I don’t understand, why not use table directly?

I don’t understand, why not use table directly?
I use li to display data because I may delete li. If Using a table, it is impossible to delete a piece of data and the content of the following cells will be automatically filled forward