2

See this example:

http://jsfiddle.net/sM3hT/

A normal table styled as follows: 

table {
 width:100%; 
 border-collapse:collapse;
}
td {
  border:1px dashed black;
  padding:5px;
}
th {
 background:orange;
}

You'll notice that the border dashing is not spaced evenly, sometimes even appearing as a solid line. Is this something inherent to dashed borders?

I've also tried applying the dashed borders to the tr instead of td, thinking that these are all the same length so the spacing would be even, but that didn't help either.

Is this something that cannot be changed?

Note: This is safari 6, it may work as advertised in other browsers.

I've included a screenshot of what it looks like at a certain width:

enter image description here

4

4 回答 4

3

I’m afraid the problem is inherent to dashed borders of adjacent cells, or adjacent elements in general. The problem is that browsers do the dashing for each element’s border separately, so the dashes won’t generally be evenly spaced when seen considering e.g. the borders of cells of a row as one line.

The problem is probably best avoided by using e.g. a solid border of a lighter color instead, e.g. border: 1px solid gray.

于 2012-11-01T14:38:50.930 回答
0

There is small bug in safari when it comes to rendering dotted/dashed borders this article might/might not helpful reading

于 2012-11-01T14:44:32.137 回答
-1 
tr { border-bottom:1px dashed black; }

or 

tr { border-bottom:1px dashed black!important; }
于 2012-11-01T14:41:46.850 回答
-1

Bugs dessapear:

The problem is solve really whoit ampliate column text in minimum : you look whith this table:

<table class="mytabletable grid" cellpadding="0" cellspacing="0">
    <thead>

        <tr class="header gradient header_padding_0">
            <th class="column_1">
                <div class="column_inner">Analysis</div>
            </th>
            <th class="column_2">
                <div class="column_inner">Effect Size</div>
            </th>
            <th class="column_3">
                <div class="column_inner">Small</div>
            </th>
            <th class="column_4">
                <div class="column_inner">Medium</div>
            </th>
            <th class="column_5">
                <div class="column_inner">Large</div>
            </th>
            <th class="column_6">
                <div class="column_inner">Notes</div>
            </th>
        </tr>
    </thead>
    <tfoot>
        <tr class="border footer_border_top">
            <td colspan="6">
                <div class="column_inner"></div>
            </td>
        </tr>
        <tr class="footer gradient footer_padding_0 hide_border_top_1 hide_border_bottom_1">
            <td class="column_1">
                <div class="column_inner">Chi-Square tests</div>
            </td>
            <td class="column_2">
                <div class="column_inner">Cohen's **w**</div>
            </td>
            <td class="column_3">
                <div class="column_inner">0.10</div>
            </td>
            <td class="column_4">
                <div class="column_inner">0.30</div>
            </td>
            <td class="column_5">
                <div class="column_inner">ampliate</div>
            </td>
            <td class="column_6">
                <div class="column_inner"></div>
            </td>
        </tr>
        <tr class="border footer_border_bottom">
            <td colspan="6">
                <div class="column_inner"></div>
            </td>
        </tr>
        <tr class="sticky-false">
            <td colspan="6"></td>
        </tr>
    </tfoot>
    <tbody>
        <tr class="row_1 row_padding_0 first_row row_odd">
            <td class="column_1 first_column">t-test</td>
            <td class="column_2">Cohen's **d**</td>
            <td class="column_3">0.20</td>
            <td class="column_4">anchor</td>
            <td class="column_5">0.80</td>
            <td class="column_6 last_column"></td>
        </tr>
        <tr class="row_2 row_padding_0  row_even">
            <td class="column_1 first_column">F-test</td>
            <td class="column_2">Cohen's **f**</td>
            <td class="column_3">0.10</td>
            <td class="column_4">0.25</td>
            <td class="column_5">0.40</td>
            <td class="column_6 last_column"></td>
        </tr>
        <tr class="row_3 row_padding_0  row_odd">
            <td class="column_1 first_column">F-test</td>
            <td class="column_2">eta^2</td>
            <td class="column_3">0.01</td>
            <td class="column_4">0.06</td>
            <td class="column_5">0.14</td>
            <td class="column_6 last_column">SPSS provides</td>
        </tr>
        <tr class="row_4 row_padding_0  row_even">
            <td class="column_1 first_column">Correlation</td>
            <td class="column_2">Pearson r</td>
            <td class="column_3">0.10</td>
            <td class="column_4">0.30</td>
            <td class="column_5">0.50</td>
            <td class="column_6 last_column">SPSS provides</td>
        </tr>
        <tr class="row_5 row_padding_0  row_odd">
            <td class="column_1 first_column">Correlation Differences</td>
            <td class="column_2">Cohen's **q**</td>
            <td class="column_3">0.10</td>
            <td class="column_4">0.30</td>
            <td class="column_5">ochenta</td>
            <td class="column_6 last_column">Fisher z transformation</td>
        </tr>
        <tr class="row_6 row_padding_0 last_row  hide_border_bottom_1 row_even">
            <td class="column_1 first_column">Proportions (%s)</td>
            <td class="column_2">Cohen's **h**</td>
            <td class="column_3">0.20</td>
            <td class="column_4">0.50</td>
            <td class="column_5">0.80</td>
            <td class="column_6 last_column">Arcsine transformation</td>
        </tr>
    </tbody>
</table>​
于 2012-11-01T15:09:49.890 回答