ul li implement table problem_html/css_WEB-ITnose

css

我想用ul+li实现表格功能，代码如下


  
  
  
  

• aaa


• bbb


• ccc


• ddd


• eee


• fff


• ggg


• hhh


• iii


• jjj


• kkk


• lll

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