Question

我对HTML不太熟悉。只是尝试调试现有代码。

这在IE中运行良好，但在Chrome或Firefox等任何其他浏览器中均无效。

＆＃13;

<table style="text-align: center;
        width: 98%;
        left: 0px;
        top: 5px; 
    background-color: #9b9bce;	
        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>

＆＃13;

这是否意味着新浏览器不再支持这些？

我可以在包括IE和Chrome在内的所有浏览器中以相同的方式工作。

＆＃13;

<table style="text-align: center;
        width: 98%;
        left: 0px;
        top: 5px;
    background-color: #9b9bce;	
    
    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>

＆＃13;

我不能让第一个中的双边边框起作用。

有什么建议吗？

Answer 1

我认为当将其设置为double时，您需要至少3px的边框宽度。（每个边框1px加上1px空间）

Answer 2

你需要这件事吗？附：几个例子http://htmlbook.ru/css/border-style

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

为任何HTML元素添加多个边框的一个好方法是使用box-shadow，因为它可以获得多个以逗号分隔的阴影。

<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>

Answer 4

使用那么多CSS，你不会想要设置所有内联。我建议在外部文件中设置样式块并将其链接到html文件，或者在html的头部设置样式块。

双边框确实有效，然而，它是狭窄的。如果缩放，则可以看到2种边框样式。

为了获得更强的效果，我会检查伪元素并使用＆＃34;：before选项来为您提供更多控制。我为您构建了一个示例代码集来查看演示。 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>

Answer 5

非常感谢所有的建议。我想我可以用这个：

<!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>

桌子的双边框

5 个答案: