【问题标题】:CSS table with double border [duplicate]带有双边框的CSS表格[重复]
【发布时间】:2017-02-26 21:22:01
【问题描述】:
table {
    border: 1px solid #000000;
    border-collapse: collapse;
}

我使用上面的代码创建了一个带有 1 像素黑色边框的表格,它工作正常,但我试图让它下面有另一个 1 像素红色边框,例如:

我尝试了border: 1px double #000000 #FF0000;,但它似乎不起作用。

我怎样才能达到这样的风格?

【问题讨论】:

标签: html css html-table


【解决方案1】:

将表格包裹在一个 div 中,并将黑色边框放在那里。

div.table {
  border: 1px solid #000;
  display: inline-block;
  padding: 1px; /*space between the borders*/
}

div.table table {
  border: 1px solid #F00;
}
<div class="table">
<table>
<tr><td>1</td><td>2<td></tr>
</table>
<div>

【讨论】:

    【解决方案2】:

    您可以将box-shadowborder 一起使用。

    table {
      border: 10px solid red;
      box-shadow: 0 0 0 10px black;
    }
    <table>
      <tr>
        <td>123</td>
        <td>456</td>
        <td>789</td>
      </tr>
    </table>

    或使用outline

    table {
      border: 10px solid red;
      outline: 10px solid black;
    }
    <table>
      <tr>
        <td>123</td>
        <td>456</td>
        <td>789</td>
      </tr>
    </table>

    【讨论】:

      【解决方案3】:

      当你想要一个“双”边框时,试着给它一个 3px 的宽度(每行 1px,它们之间的空间 1px)

      你的 CSS 应该是这样的:

      table {
          border: 3px double #000000;
          border-collapse: collapse;
      }
      

      在这里提琴:https://jsfiddle.net/captain_theo/umq1dj3t/

      编辑:如果您想要不同颜色的边框,请尝试将表格添加到容器中。在这里摆弄:https://jsfiddle.net/captain_theo/xp8bt8k2/

      【讨论】:

        【解决方案4】:

        你可以试试这个!

        table{
          border: 1px solid red;
          border-collapse: collapse;
          outline: 1px solid blue;
        }
        <table>
        <tr>
        <td>a1</td>
        <td>a2</td>
        </tr>
        <tr>
        <td>b1</td>
        <td>b2</td>
        </tr>
        <tr>
        <td>c1</td>
        <td>c2</td>
        </tr>
        </table>

        【讨论】:

          猜你喜欢
          • 2011-09-14
          • 2011-01-04
          • 1970-01-01
          • 2011-04-22
          • 2012-09-20
          • 2016-02-20
          • 1970-01-01
          • 2014-07-26
          • 2020-07-24
          相关资源
          最近更新 更多