开发者

Removing table lines and table space between cells in css

开发者 https://www.devze.com 2023-03-16 18:34 出处:网络
I have this site: http://redditlist.com/dir/1026 and I\'m stuck on tryin开发者_如何学运维g to remove spacing between cells so it will look more like this: http://redditlist.com. table#myTable{

I have this site: http://redditlist.com/dir/1026 and I'm stuck on tryin开发者_如何学运维g to remove spacing between cells so it will look more like this: http://redditlist.com.


table#myTable{
  border-collapse:collapse;
}


Use the border-collapse CSS property to remove space between cells:

table {
    border-collapse: collapse;
}

You see spacing between table cells by default because each cell has its own border, the cells don't share borders. This is called "the separated model", as explained in the Mozilla Developer CSS Reference:

The separated model is the traditional HTML table border model. Adjacent cells each have their own distinct borders. The distance between them given by the border-spacing property.

You can "remove" the spacing between the cells by making them share borders with each other, which is known as the "collapsed border model":

In the collapsed border model, adjacent table cells share borders.


Try this

table.className td
{
    display: inline-block;
}

or

table.className td
{
    display: block;
}


try

table td { display: table-cell; }

0

精彩评论

暂无评论...
验证码 换一张
取 消