6

/の垂直境界線を残りの境界線とは異なる色に<table>したい場所があります (すべての境界線は幅が 1 ピクセルで、テーブルの上に境界線はありません)。これは簡単に思えるかもしれません。問題は、Firefox、Safari、および Chrome の両方で、これらの垂直境界線が下の水平境界線に「にじみ」、見栄えがよくないことです。Firefox では、 の下の行に と同じ量の列/セルが含まれていれば問題ないように見えますが、使用すると「裁ち落とし」が発生します。<thead><th><thead><thead><colspan>

明らかな解決策は、たとえば、垂直方向の境界線に「solid」を使用し、その下の水平方向の<th>境界線に「double」を使用することです<td>。これは、Safari と Chrome で実際に機能します。しかし、私はまだ Firefox の解決策を思い付いていません。すべてを試したと思います。他の目的で必要なため、境界線の折りたたみを削除できません。(はい、デフォルトでは、IE8 と Opera で必要なようです!)

表示例: http://jsfiddle.net/7YdCQ/

コード (強い色を使用した非常に単純な例) - CSS (すべての境界線が塗りつぶされている):

table { border-collapse: collapse; }
thead th { border-left: 1px solid #F00; border-right: 1px solid #F00; }
tbody th, td { border: 1px solid #0F0; }

HTML (2 つのテーブル、colspan を含む 1 つ):

<table>
    <thead>
        <tr>
            <th>Thead TD 1</th>
            <th>Thead TD 2</th>
            <th>Thead TD 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th colspan="3">Tbody TH colspan 3</th>
        </tr>
        <tr>
            <td>Tbody TD</td>
            <td>Tbody TD</td>
            <td>Tbody TD</td>
        </tr>
    </tbody>
</table>
<table>
    <thead>
        <tr>
            <th>Thead TD 1</th>
            <th>Thead TD 2</th>
            <th>Thead TD 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tbody TD</td>
            <td>Tbody TD</td>
            <td>Tbody TD</td>
        </tr>
    </tbody>
</table>

Facebook が Open Graph プロパティを読み取らない - 本文内のメタ タグの問題

開いているグラフのプロパティを確認するには、この facebook ツールを参照してください。

<meta>にタグが表示され<body>ないので、Facebook がそう言っている理由がわかりません。ユーザーがリンクをいいね/共有したときのユーザー エクスペリエンスに影響しているため、これを修正する必要があります。

http://www.buysell.com/reviews/id/2599/

4

1 に答える 1

1

解決策は、CSS スタイルを適切にオーバーライドすることです。とタグの両方colspanでテスト済み。編集例: http://jsfiddle.net/7YdCQ/21/<th><thead><tbody>

CSS

table { border-collapse: collapse; }
tbody th, tbody td { border: 1px solid #0F0; }
thead td, thead th, tbody th { border-left: 1px solid #F00; border-right: 1px solid #F00; }

HTML

<table>
    <thead>
        <tr>
            <th>Thead TH 1</th>
            <td colspan='2'>Thead TD colspan 2</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th colspan='3'>Tbody TH colspan 3</th>
        </tr>
        <tr>
            <td>Tbody TD</td>
            <td>Tbody TD</td>
            <td>Tbody TD</td>
        </tr>
    </tbody>
</table>
<br>
<table>
    <thead>
        <tr>
            <th>Thead TD 1</th>
            <th>Thead TD 2</th>
            <th>Thead TD 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tbody TD</td>
            <td>Tbody TD</td>
            <td>Tbody TD</td>
        </tr>
    </tbody>
</table>
于 2012-11-04T21:23:47.507 に答える