标签: border

围绕表中特定行的边框？

我正在尝试设计一些HTML/CSS,它可以在表格中的特定行周围放置边框.是的,我知道我不是真的应该使用表格进行布局,但我不知道足够的CSS来完全替换它.

无论如何,我有一个包含多行和多列的表,有些与rowspan和colspan合并,我想在表的各个部分周围放一个简单的边框.目前,我正在使用4个单独的CSS类(顶部,底部,左侧,右侧),我分别附加到表<td>的顶部,底部,左侧和右侧的单元格.

.top {
  border-top: thin solid;
  border-color: black;
}

.bottom {
  border-bottom: thin solid;
  border-color: black;
}

.left {
  border-left: thin solid;
  border-color: black;
}

.right {
  border-right: thin solid;
  border-color: black;
}

Run Code Online (Sandbox Code Playgroud)

<html>

<body>

  <table cellspacing="0">
    <tr>
      <td>no border</td>
      <td>no border here either</td>
    </tr>
    <tr>
      <td class="top left">one</td>
      <td class="top right">two</td>
    </tr>
    <tr>
      <td class="bottom left">three</td>
      <td class="bottom right">four</td>
    </tr>
    <tr>
      <td colspan="2">once again no borders</td>
    </tr>
    <tr>
      <td class="top bottom left right" colspan="2">hello</td>
    </tr>
    <tr> …

Run Code Online (Sandbox Code Playgroud)

html css border css-tables

Kyl*_*nin

2017 03-02

119
推荐指数

4
解决办法

29万
查看次数

控制虚线边框行程长度和笔画之间的距离

是否可以控制CSS中虚线边框笔划之间的长度和距离？

以下示例在浏览器之间显示不同:

div {
  border: dashed 4px #000;
  padding: 20px;
  display: inline-block;
}

Run Code Online (Sandbox Code Playgroud)

<div>I have a dashed border!</div>

Run Code Online (Sandbox Code Playgroud)

差异很大:IE 11/Firefox/Chrome

IE 11边界 Firefox边框 Chrome边框

有没有什么方法可以更好地控制虚线边框的外观？

css border css3 css-shapes

Ant*_*nAL

2015 07-09

108
推荐指数

8
解决办法

13万
查看次数

当为div添加1 px边框时,Div尺寸增加,不想这样做

点击我添加,1px边框到div,所以Div大小增加2px X 2px.我不想让div大小增加.有没有简单的方法呢？

凌乱的详细解释
实际上我正在使用float:left(相同大小,如图标)添加DIV到一个container-div,所以所有都堆叠起来,当(container-div width是300px)时,没有空格宽度,所以子DIV进入下一行,所以就像目录一样,但由于边框只选择了DIV大小增加,所选DIV下的DIV会向右移动并在所选DIV下方创建空白区域.

编辑:
减少选择时的高度/宽度,但如何增加它.使用某些第三方框架,因此在DIV失去选择时没有事件.

html css border

Nac*_*ket

2017 04-16

108
推荐指数

11
解决办法

11万
查看次数

CSS三角形自定义边框颜色

尝试为我的css三角形(边框)使用自定义十六进制颜色.但是,由于它使用边框属性,我不确定如何去做.我想简单地因为兼容性而避开javascript和css3.我试图让三角形有一个带有1px边框的白色背景(围绕三角形的边角),颜色为#CAD5E0.这可能吗？这是我到目前为止所拥有的:

.container {
    margin-left: 15px;
    width: 200px;
    background: #FFFFFF;
    border: 1px solid #CAD5E0;
    padding: 4px;
    position: relative;
    min-height: 200px;
}

.container:after {
    content: '';
    display: block;
    position: absolute;
    top: 10px;
    left: 100%;
    width: 0;
    height: 0;
    border-color: transparent transparent transparent #CAD5E0;
    border-style: solid;
    border-width: 10px;
}?

Run Code Online (Sandbox Code Playgroud)

我的小提琴:http://jsfiddle.net/4ZeCz/

css border css-shapes

Ed *_*d R

2015 03-02

107
推荐指数

2
解决办法

13万
查看次数