テーブルの二重枠

私はHTMLをあまりよく知らない。既存のコードをデバッグしようとしています。テーブルの二重枠

これはIEでは問題なく動作しますが、ChromeやFirefoxなど他のブラウザでは問題ありません。

<table style="text-align: center; 
 
     width: 98%; 
 
     left: 0px; 
 
     top: 5px; 
 
    background-color: #9b9bce; \t 
 
     border: medium double #9b9bce; 
 
     border-width: 1px; 
 
     bgcolor: #FFFFFF; 
 
     background-repeat: no-repeat; 
 
     background: #FFFFFF; 
 
     padding: 10px 10px 10px 10px; 
 
     margin: 10px 10px 10px 10px;"> 
 
    <tr> 
 
    <td td align="left" style="color : white; font: 30 px; font-weight: bold;"> 
 
     Test 
 
    </td> 
 
    </tr> 
 
</table>

それは、これらは新しいブラウザではもうサポートされていないことを意味するのでしょうか？

IEとChromeを含むすべてのブラウザで同じように動作します。

<table style="text-align: center; 
 
     width: 98%; 
 
     left: 0px; 
 
     top: 5px; 
 
    background-color: #9b9bce; \t 
 
    
 
    border-top: 2px solid #f38e23; 
 
    border-left:2px solid #f38e23; 
 
    border-right:2px solid #f38e23; 
 
    border-bottom:2px solid #f38e23; 
 
     bgcolor: #FFFFFF; 
 
     padding: 10px 10px 10px 10px; 
 
     margin: 10px 10px 10px 10px; 
 
    "> 
 
    <tr> 
 
    <td td align="left" style="color: white; font: 30 px; font-weight: bold;"> 
 
     Test 
 
    </td> 
 
    </tr> 
 
</table>

私は最初のものであり、二重枠の事の作業を取得傾けます。

提案がありますか？

出典

2017-07-21 user2351802

私は編集の前後に二重の罫線が表示されません。 – haykam

a [div]（https://www.w3schools.com/tags/tag_div。ASPの）テーブルの周りに、divは2番目の境界線を持っています。 –

'bgcolor'は有効なプロパティではありません。 – j08691

私はあなたが2倍に設定する場合、少なくとも3pxの境界線の幅が必要だと思います。（各国境1pxに1pxのスペースを加えたもの）

出典

2017-07-21 14:59:04

ありがとう。「どの国境にも1pxに1pxのスペースを加えたもの」をどのように設定しますか？ – user2351802

境界線の幅を3pxに設定して境界線のスタイルをdoubleにすると、各境界線に1pxと1pxの間に（1 + 1 + 1）を加えます。基本的に、境界幅を3で割り切れる値に設定しようとする必要があります。境界線と境界線の両方に自動的に均等に適用しようとします。 –

ありがとうございます。どうもありがとう。私はそれを試してみる。 – user2351802

これは必要ですか？ P.P.いくつかの例http://htmlbook.ru/css/border-style

.dbl-border { 
 
    border: 3px double blue; 
 
    width: 300px; 
 
    height: 100px; 
 
}

<div class="dbl-border"> </div>

出典

2017-07-21 14:59:08 Sergey

明確にするには、OPの元のCSSが 'border-width'を' 1px'に設定しました。これはダブルボーダーでは小さすぎます。その幅を削除すると、予想される動作になります。 –

ありがとうございました。私は逃しました。 – user2351802

は、複数のカンマ区切りの影を取得することができますので、任意のHTML要素に複数の境界線を追加するための素晴らしいトリックがbox-shadowを使用しているがあります。そのくらいのCSSで

<table style="text-align: center; 
 
     width: 94%; 
 
     left: 0px; 
 
     top: 5px; 
 
     background-color: #9b9bce; 
 
     border: 2px solid #f38e23; 
 
     padding: 10px; 
 
     margin: 20px; 
 
     box-shadow: 0px 0px 0px 5px #0f0, 0px 0px 0px 10px #f00, 0px 0px 0px 15px #00f;"> 
 
    <tr> 
 
    <td td align="left" style="color: white; font: 30 px; font-weight: bold;"> 
 
     Test 
 
    </td> 
 
    </tr> 
 
</table>

出典

2017-07-21 15:27:42

、あなたはすべてのインラインことを設定する必要はありません。外部ファイルにスタイルブロックを設定し、それをhtmlファイルにリンクするか、htmlの先頭にスタイルブロックを設定することをお勧めします。

ダブルボーダーは機能しますが、それはすべて狭いです。ズームすると、2つの境界線スタイルが表示されます。

強い効果のために

、私は「擬似要素を確認し、利用することになる：。オプションはあなたに多くの制御を与える前に私はあなたがデモを表示するためcodepenサンプルを建てhttps://codepen.io/ckroll17/pen/LjPGaj

<style type="text/css"> 

    .myBorder{ 
     border: 3px solid blue; 
     background-color: #ea4421; 
     color: #ffffff; 
     margin: 8% auto; 
     padding: 15px; 
     position: relative; 
    } 

    .myBorder:before{ 
     background: none; 
     border: 4px solid black; 
     content: ""; 
     position: absolute; 
     top: -10px; 
     left: -10px; 
     right: -10px; 
     bottom: -10px; 
    } 
</style>

。

<table class="myBorder"> 
    <tr> 
    <td> 
     Lorem ipsum dolor sit amet 
    </td> 
    </tr> 
    <tr> 
    <td>consectetur adipiscing elit</td> 
    <td>sed do eiusmod tempor</td> 
    <td>Ut enim ad</td> 
    <td>adipisci velit</td> 
</tr> 
<tr> 
    <td>aspernatur aut odit</td> 
    <td>quae ab</td> 
    <td>magnam aliquam quaerat voluptatem</td> 
    <td>consequatur</td> 
    <td>laboriosam, nisi ut aliquid</td> 
    <td>Quis autem vel eum iure</td> 
    <td>reprehenderit qui in ea</td> 
    <td>Ut enim ad minima</td> 
</tr> 
</table>

出典

2017-07-21 16:00:51 Carla

ありがとうございました。私はこれを使用することができると思う： – user2351802

<！DOCTYPE htmlのを>

Box with a border

SOMETEXT
Time Here

– user2351802

ありがとうございます。私はこれを使用することができると思う：

<!DOCTYPE html> 
<html> 
<head> 
<style> 
    .bordered { 
    width: 98%; 
padding: 1px; 
    border: 5px double #9b9bce; 
    } 
    .tablestyle { 
background-color: #9b9bce; 
width: 100%; 
    } 
</style> 
</head> 
<body> 
<div class="bordered"> 
<table class="tablestyle"> 
<tr> 
<td style="text-align:left; font-size: 23pt; font-weight: bold;"> 
Box with a border 
</td> 
<td style="text-align:right; font-weight: bold;"> 
SOMETEXT 
<br> 
Time Here 
</td> 
</tr> 
</table> 
</div> 
</body> 
</html>

出典

2017-07-24 10:56:43 user2351802

答えて

関連する問題