Simulating Border-Collapse in Lists (No Tables)

Simulating border-collapse in lists (no tables)

You can add a left and bottom border to the ul and drop it from the li.

fiddle: http://jsfiddle.net/TELK7/

html:

<ul>
    <li>one</li>
    <li>two</li>
</ul>

css:

ul{
    border: 0 solid silver;
    border-width: 0 0 1px 1px;
}
li{
    border: 0 solid silver;
    border-width: 1px 1px 0 0;
    padding:.5em;
}

simulate border collapse in horizontal ul li

Like this:

<ul>
    <li><a href="#">A Link</a></li>
    <li><a href="#">A Link</a></li>
    <li><a href="#">A Link</a></li>
    <li><a href="#">A Link</a></li>
</ul>

css:
​

ul, li {
    margin:0;
    padding:0;
    list-style:none
}

li {
    float:left;    
}    

​ul li a {
    display:block;
    padding:3px;
    border-top:1px solid #ff0000;   
    border-bottom:1px solid #ff0000; 
    border-right:1px solid #ff0000; 
}

ul li:first-child a {
    border-left:1px solid #ff0000
}

Collapse borders of nested DIVs

The border collapse doesn't work, I got it working with your JsFiddle but you probably have to change it because you're DIVs are dynamically created.

div.box > div.box {
    border-bottom: solid 1px gray;
}

div.box > div.box > div.box:last-child {
    border-bottom: none;
}

border-collapse: collapse removes padding from table

is there a logical explanation, Why is this working like that?

When you collapse the borders, it joins adjacent borders together.

The border around the outside edge of the table is adjacent to the outside borders of the outside cells.

If those borders are joined together then you can't put padding between them. There is no "between".

Is there a CSS workaround for that situation?

Not, in general, a plain one.

You need to add another element around the table, and place the padding there.

In this case, you already have the container div, so you can move the padding to that.

.container {

  width: 400px;

  height: 300px;

  margin: 40px auto;

  background: #ddd;

  padding: 30px;

}

table {

  text-align: center;

  width: 100%;

  height: 100%;

  border-collapse: collapse;

}

td {

  border: 1px solid red;

}

<div class="container">

  <table>

    <tr>

      <td>cell</td>

      <td>cell</td>

    </tr>

    <tr>

      <td>cell</td>

      <td>cell</td>

    </tr>

  </table>

</div>

List items without overlapping borders

li {
    margin-top: -1px;
    border: 1px solid red;
    padding: 10px;
}

Cheap way of doing it ><.
They are not overlaping, its just 2px border from top and bottom

How to make borders collapse (on a div)?

here is a demo

first you need to correct your syntax error its

display: table-cell;

not diaplay: table-cell;

   .container {
    display: table;
    border-collapse:collapse
}
.column {
    display:table-row;
}
.cell {
    display: table-cell;
    border: 1px solid red;
    width: 120px;
    height: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

HTML Tables has a weird bold horizontal line due to border-collapse property

This is caused by improper scaling handling of browsers.

If you have a 1px border and DPI Scaling set to, for example 150%, the border would technically be 1.5px. Because the browser doesn't use sub-pixel rendering, it alternates between 1px and 2px.

There are multiple ways to deal with it.

---

1. Set the border-width to 0.01px

A quick and dirty workaround, because the Browser will fallback to at least 1px

---

2. Use resolution media queries

Change the border-width to the appropriate decimal per scaling level.

@media (min-resolution: 120dpi) {
  table, th, td {
    border-width: 0.75px;
  }
}

@media (min-resolution: 144dpi) {
  table, th, td {
    border-width: 0.666px;
  }
}

@media (min-resolution: 192dpi) {
  table, th, td {
    border-width: 0.5px;
  }
}

Here's an overview of the different DPI Scaling Levels and their values

DPI Scaling Level

• Smaller 100% (default) = 96 dpi
• Medium 125% = 120 dpi
• Larger 150% = 144 dpi
• Extra Large 200% = 192 dpi

---

3. JavaScript

Change the border-width to the appropriate decimal per scaling level with JavaScript using the window.devicePixelRatio variable.

How to remove table border completely from an HTML page

Because of the "Cascade" part of CSS, you are overriding your own "no border!" styles with styles that add a border back in. The commas you are using between selectors in your CSS
table#t01, th, td { ... }
table#t02, th, td { ... }
mean that the following styles are applied to ALL th, td, not just ones that are in table#01 or table#02

ALso, you do not need to add in "table" before "#01" and "#02" - you are using IDs for the tables - you don't need to be more specific and say that the selector apples to all Tables that have an ID of #01/#02.

The following CSS will clean things up for you. Also, you are applying "font-size: 80%" twice in your tables (through the table and through the td styles). You may want to reevaluate your math so you don't have to set that twice.

span.note1 {float:left}
span.note2 {font-size:80%}

table {
    border-collapse: collapse;
    width:300px;
    font-size:80%;     
}

th, td {
    font-size: 80%;
}

#t02, #t02 th, #t02 td {
    border: 1px solid black; 
}

CSS - Non-overlapping / no-double borders with border-collapse: separate;

Why not put the top and left borders on the table element and leave those out for cells? Like: http://jsfiddle.net/X3VMJ/6/

---

Related Topics