次の例を参照してください。
次のようにスタイル設定された通常のテーブル:
table {
width:100%;
border-collapse:collapse;
}
td {
border:1px dashed black;
padding:5px;
}
th {
background:orange;
}
境界線の破線が均等に配置されておらず、実線で表示されることもあります。これは破線の境界線に固有のものですか?
また、td の代わりに tr に破線の境界線を適用しようとしましたが、これらはすべて同じ長さで間隔が均等になると考えていましたが、どちらも役に立ちませんでした。
これは変えられないものですか？
注: これは safari 6 です。他のブラウザーで宣伝されているように動作する可能性があります。
特定の幅でどのように見えるかのスクリーンショットを含めました。
この問題は、隣接するセルの破線の境界線、または一般に隣接する要素に固有のものであると思います。問題は、ブラウザが各要素の境界線に対して個別にダッシュを実行することです。そのため、たとえば行のセルの境界線を1行と見なすと、ダッシュは通常、等間隔に配置されません。
この問題は、たとえば、代わりに明るい色の実線の境界線を使用することで、おそらく最もよく回避されborder: 1px solid grayます。
点線/破線の境界線のレンダリングに関しては、Safari に小さなバグが あります。
バグが消える:
問題は、whoit 列のテキストを最小限で実際に解決することです。次の表を見てください。
<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>
tr { border-bottom:1px dashed black; }
また
tr { border-bottom:1px dashed black!important; }