2

ヘッダーに次のCSSがあります。

    <style type="text/css">
    table, td
    {
        border-color: #600;
        border-style: solid;
    }

    table
    {
        border-width: 0 0 1px 1px;
        border-spacing: 0;
        border-collapse: collapse;
    }

    td
    {
        margin: 0;
        padding: 4px;
        border-width: 1px 1px 0 0;
        background-color: #FFC;
    }
</style>

そして、私のページ本文の次の表：

<table>
    <tr>
        <th style="width: 100px;">column</th><th style="width: 180px;">column</th><th style="width: 100px;">column</th><th style="width: 100px;">column</th>
        <th style="width: 180px;">column</th><th style="width: 180px;">column</th> <th>column</th>
    </tr>
    <tr>
        <td>text</td><td>text</td><td>text</td><td>text</td><td>text</td><td>text</td><td><a href="">text</a></td>
    </tr>
</table>

結果は次のとおりです。

ここに画像の説明を入力してください

最初の列ヘッダーに左の境界線があるのがわかりますか？何がこれを引き起こしているのでしょうか、そしてどうすればそれをなくすことができますか？

ありがとう！

4

3 に答える 3

3

これをCSSに追加します。

tr{border-left:1px solid #000;}
tr:first-child{border-left:none;}

そうしないと、左側に境界線が表示されません

このフィドルを確認してください：http：//jsfiddle.net/surendraVsingh/KNNeZ/

于 2012-06-23T19:06:07.107 に答える
1

tableスタイルを更新してください

 table
    {
        border-width: 0 0 1px 0px;
        border-spacing: 0;
        border-collapse: collapse;
    }

また、TDタグに左の境界線を追加して、thではなくtdに左の順序が存在するようにします。

td
    {
        margin: 0;
        padding: 4px;
        border-width: 1px 1px 0 1px;
        background-color: #FFC;
    }​

このフィドルを試してみてください

于 2012-06-23T18:58:02.467 に答える
1

デモ：境界線を修正しました。後で削除できるように、わかりやすくするために 追加margin:20px;しました。table

于 2012-06-23T19:04:50.517 に答える