Double Dotted Border While Using Colspan

Double dotted border while using colspan

Adding border-collapse: separate; to your table fixes the issue, see http://jsfiddle.net/quyMy/

I've added a dynamic test case to that fiddle. Click anywhere, and the visibility of the original/new table will toggle, allowing you to see the difference much easier.

Another way to get rid off the unexpected border is to add a plain <tr></tr> after the row containing <td colspan=3>.

CSS Border-collapse in conjunction with dotted border

border-collapse is your culprit.

I ran into this issue with a dotted bottom border is a table (that was actually a table, not a layout).

First, set "border-collapse: separate;"

Anything with a border, set the border;

Then set the border width to 0px for anything that did not have a border.

That should get you there for Chrome.

How to display a good looking dotted border in table?

Disclaimer: This is not a simple solution and is rather complex to understand but if you really want to produce continuous dots then this is the only approach that I can think of. I wouldn't recommend adding so much complexity for what is a small aberration with the borders but I'd leave it to you.

The approach for creating the continuous border is:

• A dotted background is added to the table itself using radial-gradient images. Since table is the parent container, the dots stretch continuously in a seamless manner.
• The size of the background gradient in Y-axis is equivalent to height of the td + the padding on either side. This is critical to the working.
• The position of the background in Y-axis is calculated as -1 * (background-size in Y-axis/2) - 2px.
• The background-repeat is set to round so that it kind of always produces full dots. All these are critical to the solution.
• Colors cannot be added to the td or the tr as solid colors because they would hide the table background and so the solution is to add them via linear-gradient (except that the color does not change). This is done because the size of gradients can be controlled whereas that of solid color cannot be.

table { /* to produce the dots via radial gradient */

  background-image: radial-gradient(circle at 50% 50%, black 1px, transparent 2px);

  background-size: 8px 50px; /* size in y-axis is equal to td height + padding top + padding bottom */

  background-position: 2px -27px; /* position in y-axis is -1 * size/2 - 2px */

  background-repeat: round; /* makes dots repeat in round manner */

  border-collapse: collapse;

}

td {

  vertical-align: bottom;

  height: 46px; 

  padding: 2px;

}

tr:nth-child(even) {

  background-image: linear-gradient(#eee, #eee);

  background-size: 100% 46px; /* size in y-axis is height of td */

  background-repeat: no-repeat;

}

tr:nth-child(even) td:nth-child(even) {

  background-image: linear-gradient(#e2e2e2, #e2e2e2);

  background-size: 100% 46px;

  background-repeat: no-repeat;

}

tr:nth-child(odd) td:nth-child(even) {

  background-image: linear-gradient(#eaeaea, #eaeaea);

  background-size: 100% 46px;

  background-repeat: no-repeat;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<table>

  <tr>

    <td>Hello World</td>

    <td>Hello World</td>

    <td>Hello World</td>

  </tr>

  <tr>

    <td>Hello World!!!</td>

    <td>Hello World!!!</td>

    <td>Hello World!!!</td>

  </tr>

  <tr>

    <td>Hello World</td>

    <td>Hello World</td>

    <td>Hello World</td>

  </tr>

  <tr>

    <td>Hi There!!!</td>

    <td>Hi There!!!</td>

    <td>Hi There!!!</td>

  </tr>

</table>

<br/>

<table>

  <tr>

    <td>Lorem Ipsum Dolor Sit Amet</td>

    <td>Lorem Ipsum Dolor Sit Amet</td>

    <td>Lorem Ipsum Dolor Sit Amet</td>

  </tr>

  <tr>

    <td>Lorem Ipsum Dolor</td>

    <td>Lorem Ipsum Dolor</td>

    <td>Lorem Ipsum Dolor</td>

  </tr>

  <tr>

    <td>Lorem Ipsum Dolor Sit</td>

    <td>Lorem Ipsum Dolor Sit</td>

    <td>Lorem Ipsum Dolor Sit</td>

  </tr>

  <tr>

    <td>Lorem Ipsum</td>

    <td>Lorem Ipsum</td>

    <td>Lorem Ipsum</td>

  </tr>

</table>

Non Uniform Dashed Border in Table Cells

Browsers have oddities in rendering dashed borders. You can fight against them by removing cell spacing and cell padding and setting the border on a tr element and not on cells, e.g.

table { border-collapse: collapse; }
td { padding: 0; }
tr { border-bottom:1px dashed #494949; }

But this still seems to fail on IE 9 (at cell junctions), and old browsers ignore borders set on table rows.

Consider using a solid gray border instead. It works consistently and might be visually acceptable, maybe even better.

Chrome bug with colspan and border?

This appears to be the same bug listed here (or similar)

An easy workaround is at the bottom of this answer.

This is a relevant comment under that bug report:

It's a known (old) issue in our table code. Collapsing borders are
determined based on adjacent cells and our code doesn't deal correctly
with spanning cells (we only consider the cell adjoining the first row
/ column in a row / column span). On top of that, our border
granularity is determined by the cell's span.

To fix this bug, we would need to overhaul our collapsing border code,
which is a big undertaking.

Here is an example that highlights the same problem:

html,

body {

  height: 100%;

}

table {

  border-collapse: collapse;

  width: 100%;

  height: 100%;

}

.left {

  border-right: 1px #aaaaaa solid;

  border-top: 1px #aaaaaa solid;

}

.right {

  border-top: double 20px #F00;

}

<table>

  <tr>

    <td colspan=2>top</td>

  </tr>

  <tr>

    <td class="left">left</td>

    <td class="right">right</td>

  </tr>

</table>

double border-style for table does not work

You should put 1px black into the property like, border-width: 1px; border-color: black; border-style: double; or just use border: 1px black double; to make it work. The border="1px" works "inside" the table, which you can set styles of tr, td, and th in css. I set different widths, 1px inside and 10px outside for you to see the differences clearly.

<table border="1px" style="border: 10px black double;">

            <thead>

                <tr>

                    <th colspan="2" style="padding:5px; background-color:blue; color:white; font-family:Arial; font-size:14px">Pricelist</th>

            </tr>

        

                <tr>

                    <th style="padding:5px">Product</th>

                    <th style="padding:5px">Price</th>

                </tr>

        

            </thead>

        

        <tbody>

            <tr>

                <td style="padding:5px">item1</td>

                <td style="padding:5px">price1</td>

            </tr>

        

            <tr>

                <td style="padding:5px">item2</td>

                <td style="padding:5px">price2</td>

            </tr>

        

            <tr>

                <td style="padding:5px">item3</td>

                <td style="padding:5px">price3</td>

            </tr>

        

        </tbody>

    </table>

Issue with aligning table cell exactly on dotted line

Add colspan = "2" to the td that has the dotted line. colspan and rowspan define how many columns or rows the cell spans, respectively.

Here's a modified version of your demo: little link.

---

Related Topics